티스토리 뷰

WEBn/WEB2 - CSS

[WEBn] WEB2 - CSS - 박스모델

정뚱띵 2018. 4. 30. 19:32
728x90
반응형

[WEBn] WEB2 - CSS


생활코딩 강의를 들었던 것을 정리를 하겠습니다.


<style>

</style>

html 문법이면서 style태그 안쪽 내용은 css이니까 css언어의 문법에 맞게 처리해주라는 의미입니다.


위 사진에 있는 a, #active, .saw, h1는 선택자라고 부르고, 셀렉터입니다.

아래 자세히 설명하겠습니다.


가독성 및 유지보수에 효과적으로 증가합니다.


사진과 같이 이렇게 볼 수 있습니다.


Webpage에 CSS삽입방법은

첫 번째 style tag

두 번째 style property

있습니다.


<li><a href="2.html" title="CSS이란" style="color:red">CSS</a></li>

style이라는 속성을 쓰면 그 속성의 값을 CSS문법에 따라 해석해서 style속성에 적용을 합니다.

선택자는 필요가 없습니다.


설명을 위해 1.html과 2.html을 서로 다르게

class 하나로 묶어 보겠습니다. Grouping하는 것 입니다.


<li><a href="1.html" title="HTML이란" class="saw">HTML</a></li>

<li><a href="2.html" title="CSS이란" class="saw active">CSS</a></li>

class property에는 여러개의 value가 들어올 수 있어 띄어쓰기로 구분합니다.


이후

사진과 같이

6번 라인에서 21라인과 같이 선택자를 지정을 해줍니다.


.saw {

      color: gray;

    }

.active {

      color: red;

    }

클래스 선택자 순서에 따라 적용이 되기 때문에


.active {

      color: red;

    }

.saw {

      color: gray;

    }

위 두개의 순서를 바꾸면 색상이 변경 되지 않습니다.

똑같은 선택자일 경우 가장 마지막에 등장하는 선택자가 우선순위가 가장 높습니다.


그리하여


<style>

    a {

      color: black;

      text-decoration: none;

    }

    #active {

      color: red;

    }

    .saw {

      color: gray;

    }

    h1 {

      font-size: 45px;

      text-align: center;

    }

  </style>

'id 선택자 > 클래스 선택자 > 태그 선택자'라고 생각 할 수 있으며


id value가 단 하나만 등장해야 하고 중복되어서는 안됩니다.



위 사진을 보게 되면 선택자들에 대해 알 수 있으며


https://www.w3schools.com/cssref/css_selectors.asp


더 많은 선택자들을 볼 수 있습니다.


  • 박스모델


web1에서 기획서를 다시 보게 되면 이러합니다.


http://jeongzzang.com/58


box.html을 하나 만들어 봅니다.


html의 기본적인 코드인


<!doctype html>

<html>

  <head>

      <meta charset="utf-8">

      <title></title>

  </head>

  <body>

    

  </body>

</html>

작성을 해줍니다.

첫번째로 테두리에 대하여 알아보겠습니다.


26번 라인을 보게 되면 'CSS이란' h1 태그이며 

27번 라인에는 <a href="주소">CSS</a> 링크가 걸려 있습니다.


이 부분을 가지고


<style>

  h1{

    border-width: 5px;

    border-color: red;

    border-style: solid;

    }

  a{

    border-width: 5px;

    border-color: red;

    border-style: solid;

    }

</style>

border 테두리를 설정합니다.

다음으로는

두께와 색상과 선의 종류를 설정합니다.


위 사진과 h1 태그를 보게되면

웹브라우저에서 h1은 전체를 쓰는걸 알 수 있고 

a태그는 자기자신의 크기만 쓰는 걸 알 수있다.


전체를 쓰는 것들을

block level element

자기 자신의 크키만 쓰는 것들은

inline element

입니다.


반대로 위 사진과 같이 하려고 하면


<style>

  h1{

    border-width: 5px;

    border-color: red;

    border-style: solid;

    display:inline;

    }

  a{

    border-width: 5px;

    border-color: red;

    border-style: solid;

    display:block;

    }

</style>

이러한 식으로 해줄 수 있습니다.


블록을 자신의 크키만큼 쓰고 싶으면

display:inline;

써주면 되고

display:none;

안보이게 만들수도 있습니다.


중복을 최소화 하는 법은


<style>

h1, a{

      border:5px solid red;

      }

</style>

이런식으로 할 수 있습니다.


또한,

h1 태그는 display: block;를 생략되어 있다는 것을 알 수 있습니다.


  • 정리

<font color="red">WEB</font>

색상 변경한다.

padding: 20px;

테두리와 내용의 간격을 준다.

margin: 0;

테두리 사이의 간격을 준다.

width:130px;

태그의 폭 크기가 변경된다.


https://www.w3schools.com/cssref/pr_border.asp


CSS box model 강의

https://opentutorials.org/course/3086/18319




728x90
반응형
댓글
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today