코드스테이츠 소프트웨어엔지지어링 부트캠프 +8일

오늘 배운 것 : CSS

기본적인 것은 코드스테이츠 시작전 생활코딩에서 배운내용과 같은내용이어서 금방금방 넘어갔다.

내가 새롭게 알거나 잊고있던것을 다시 기억한 것 위주로 정리한다.

-시맨틱태그와 논시맨틱태그

시맨틱태그 : <header>, <main>, <nav>, <aside>, <footer>

논시맨틱태그 : div>

-CSS의 문법 구성

id 사용

id는 문서 내의 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 한다.

<h4 id = "title">This is Min-A.</h4>
<!-- id는 한 문서에서 하나의 요소에만 사용해야 한다. -->

#title{
color : red;
}
/* id로 요소를 선택해 스타일링한다. */

다음은 모든

• 요소에 id를 추가하고 CSS를 적용했다.

 

id는 문서 내의 단 하나의 요소에만 적용할 수 있는 유일한 이름이어야 한다.

<!-- 잘못된 id 사용 -->
<ul>
  <li id="menu-item">Home</li>
  <li id="menu-item">Mac</li>
  <li id="menu-item">iPhone</li>
  <li id="menu-item">iPad</li>
</ul>

class 사용

동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해 class를 사용한다. navigation section의 모든 li요소에 동일한 class를 추가하면, 동일한 스타일을 여러 엘리먼트에 적용할 수 있다. class는 #이 아닌 . 을 이용해 선택한다.

<!-- 바른 사용 -->
<ul>
  <li class="menu-item">Home</li>
  <li class="menu-item">Mac</li>
  <li class="menu-item">iPhone</li>
  <li class="menu-item">iPad</li>
</ul>

.menu-item {
  text-decoration: underline;
}
/* class menu-item을 선택하여 위의 모든 li 요소들에 밑줄을 적용한다. */

-CSS 단위

절대 단위 : px, pt 등

상대 단위 : em, %, rem, ch, vw, vh 등

1. 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적크기로 정하는 경우

px 사용을 권장, 사용자의 화면이 변하는 경우 상대적으로 크거나 작게 보일 수 있으므로 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.

2. 일반적인 경우

상대 단위인 rem 추천, 브라우저의 기본 글자 크기가 1rem 이다.

3. 반응형 웹을 만들때

반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트이다.

데스크탑, 스마트폰, 태블릿 등 사용하는 디바이스마다 다르므로 디바이스 크기별로 CSS를 달리 적용해야 한다. 디바이스 크기를 나누는 기준을 보통 px로 정한다.

4. 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우

vw, vh 를 사용하는것이 좋다. 웹사이트의 보여지는 영역을 Viewport라고 한다. vw, vh 는 viewport width, viewport height이다.

화면을 가득 채우며 딱 떨어지게 스크롤 되는 사이트는 100vw, 100vh 를 사용한 것이다.

예시 : 테슬라홈페이지

Electric Cars, Solar & Clean Energy | Tesla

 

 

줄바꿈이 되는 박스(block) vs 옆으로 붙는 박스(inline, inline-block)

줄바꿈이 되는 태그 : <h1> <p>

줄바꿈이 되지 않는 태그 : <span>

block 목록, inline 목록

박스 크기 측정 기준

레이아웃 디자인을 할 때 가장 많이하는 실수는 박스에 적용할 여백을 고려하지 않고 박스의 크기를 디자인하는 것이다.

margin, padding, border 등이 합쳐지면 생각보다 더 커지게 된다.

레이아웃 디자인을 조금 더 쉽게하는 방법은 여백과 테두리 두께를 포함하여 박스를 계산하는 것이다.

*{
box-sizing : border-box;
}

모든요소를 선택해 box-sizing 속성을 추가하고, border-box 라는 값을 추가한다.

이렇게 하면 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.