CSS : 개념과 특징, 박스 모델

 

 

출처: 생활 코딩의 WEB 2 강좌.

 

최종 결과물입니다.

 

CSS의 개념

 

1. HTML 태그를 디자인적으로 보완하기 위해 개발되었다.
2. HTML 태그의 디자인을 일일이 수정할 필요 없이, 클래스로 묶어 대량 수정이 가능하다는 점에서 편리하다.
3. 이를 위해서는 CSS 내에서 selector 지정이 필요하다. Selector는 디자인을 수정할 단위이며, 같은 효과를 적용할 태그의 묶음이다.
   
   ex. h1 (헤더), a (링크), a:visited (방문한 링크), ol (자동정렬된 리스트), 또는 앞에 #를 붙여 사용자가 별도 지정한 class나 id에 효과를 일괄 적용할 수 있다.

  a:link {
    color: darkgray;
    text-decoration: none;
  }
  a:visited {
    color: #32a1ce;
  }
  a:hover {
    color:orange;
  }
  h1 {
    border: thick double;
    border-color: gold #32a1ce;
    font-size: 100px;
    text-align: center;
  }
  #Menu {
    border-bottom: 1px lightgray solid;
    margin: 0px;
    text-align: center;
    font-size: 20px;
  }
  ol {
    border-right: thick double #32a1ce;
    width: 100px;
    margin:0px;
    padding: 20px;
  }

CSS의 특징

1. class와 id: class는 집단으로 묶어 적용이 가능하지만, id는 개별적으로 부여된다. 둘 다 CSS에서 Selector로 사용할 때는 예시 속 #Menu처럼 #을 붙인다.
2. CSS의 위치: body가 시작되기 전 <style> </style> 태그 안에 작성한다.
3. 더 범위가 좁은 selector가 우선적으로 적용된다. (예: 그냥 링크인 a:link보다 '클릭'한 링크인 a:visited, 또는 '마우스를 갖다댄 링크'인 a:hover가 우선한다)
4. 범위가 같을 때는 더 아래에 있는 selector가 가장 최신 업데이트로 간주되어 우선적으로 적용된다. (예시 속에서는 a:hover가 a:visited에 우선권을 가지지만, 둘의 순서를 바꾸면 그 반대가 된다)

 

박스 모델 

 

• 헤더, 리스트 등 적용하고 싶은 selector 안에 border 레퍼런스를 삽입한다.
• 이 때 스타일을 지정하지 않으면 기본값인 투명으로 적용되니 반드시 지정해 줘야 한다. (ex. border: 1px solid;)
• 색과 스타일 또한 지정 가능하다. 순서는 상관 없으며, border: gold solid도 solid gold도 모두 가능하다.
• 그러나 selector에 두 가지 이상의 색을 지정해주고 싶으면 (가로와 세로의 색을 다르게 하고 싶다거나) border-color라는 별도의 레퍼런스로 지정해주어야 한다. 이 때 순서에 따라 먼저 오는 게 가로, 뒤에 오는 게 세로가 된다. 4가지 테두리 모두 다른 색을 지정해줄 수도 있으며, 이 때 시계방향으로 위쪽 가로 -> 오른쪽 세로 -> 아래쪽 가로 -> 왼쪽 세로 순으로 지정된다.

h1, a {
border-width:5px;
border-color:red;
border-style:solid;
}

예시와 같은 경우는 색과 스타일이 한 종류이므로 편의를 위해 그냥 border: 5px red solid;로 생략 가능하다.

 

• 여백을 만들기 위해 padding: 20px; 와 같이 별도 패딩도 지정 가능하다.
• 두 테두리 사이 간격을 없애려면 마진을 줄여 (margin: 0px; 를 작성해)야 한다. 

 

구분선 긋기

위는 모두 border를 사용한 예시이다. 다만 border-right 또는 border-bottom 태그를 이용하여 네 테두리의 박스 모델을 생성하지 않고, 개별적인 선만 그었다.

<ol class="books">
<li><a href="2.html" class="saw"> 책 </a> </li>
<li><a href="3.html" class="saw"> 이벤트 </a> </li>
<li><a href="4.html" class="saw">충전</a> </li>
</ol>

처음에 코드 적용이 안 된 줄 알고 books라고 따로 class 값을 지정했는데, 그럴 필요는 없었고 셀렉터를 ol로 지정하면 되었다. (코드에 다른 ol이 없었기 때문에)

 

ol은 'block'타입이기 때문에 (텍스트 뿐만 아니라 전체 화면 크기를 차지한다는 말) border가 맨 오른쪽에 지정되어서 안 보였던 것.

 

ol {
    border-right: thick double #32a1ce;
    width: 100px;
    margin:0px;
    padding: 20px;
  }

그래서 별도의 width 값을 지정해 왼쪽으로 선을 당기고, 색과 스타일을 지정했다. 

 

저 메뉴 밑의 선과 파란 선이 겹쳐지기를 원해서 마진을 0으로 설정, 다만 리스트가 너무 붙는 느낌이 없도록 리스트와 border-right 사이 패딩을 설정했다.

 

저 '메뉴' 밑의 선은 사실 생활코딩의 내용을 혼자서 응용해본 건데, 헤더도 아니고 리스트도 아니고 그냥 문단 하나였기 때문에 고민이 되었다. 고민 끝에 별도의 아이디를 부여하기로 결정. 

(구글에 can I assign id to p in css? 라고 물어보기까지 했는데 복수적용이 아니라 특정 문단만 적용하고 싶은 거면 그러래 땡큐)

 

<p> <p id="Menu"> 메뉴 </p>

이렇게 Menu라는 아이디를 부여한 후,

 

  #Menu {
    border-bottom: 1px lightgray solid;
    margin: 0px;
    text-align: center;
    font-size: 20px;
  }

 CSS에서 아랫선을 그어줬다. 너무 왼쪽으로 치우친 느낌이라 center로 배치! 폰트 좀 키워주고 마진 없애고 회색으로 설정!

 

아직은 매우매우 초보지만 생활코딩 시작한지 1시간 째입니다 (그동안 html 후루룩 배우고 깃허브 페이지 제작함) 🙆🏻‍♀️