본문 바로가기
Study/2023

CSS3 총정리 / 레이아웃 구조 잡기

by 하구땡 2023. 12. 13.
반응형

 

📌[용어정리]

  • 선택자(selector) : 특정 태그를 선택해서 해당 태그의 속성을 변경하는 목적으로 사용한다.
    • div { } ⇒ div가 선택자
  • 전체선택자(universal selector) : *
  • 태그선택자 : div, head, body 등
  • id선택자 : #
  • class선택자 : .
  • 속성선택자
    • <input type=”text”/>의 경우 input[type=text]와 같이 속성을 사용해 선택해준다.
  • 후손 및 자손 선택자
    • 후손 : 부모 노드 밑에 존재하는 모든 노드를 말한다.
      • div ul
      • div p
      • div태그 아래 위치한 모든 ul태그들 혹은 p태그들을 선택하게 된다.
    • 자손 : 부모 노드 바로 밑에 존재하는 깊이가 1인 노드를 말한다.
      • div > h1
      • div > p
      • div태그 바로 아래 위치한 자손 태그인 h1, p를 선택하게 된다.
  • 동위선택자(+, ~)
    • ~ : h3~div → h3와 동등한 위치에 있는 div태그를 전부 선택한다.
    • + : h3+div → h3와 동등한 위치에 있는 div태그 중 가장 가까운 태그를 하나 선택한다.
  • 반응선택자
    • li:hover
  • 상태선택자 => 보통 input태그가 특정한 상태일 때 css를 지정해주기 위해 사용
    • input:focus
    • input:enabled
    • input:disabled
  • 구조선택자
    • first-child
    • last-child
    • nth-child(2n+1) : 홀수인 것만 선택
    • nth-child(2n) : 짝수인 것만 선택
  • 문자선택자
    • #header::first-letter or #header::last-letter / #header::first-line or #header::last-line
    • #content p:first-child::selection : 문자열을 드래그했을 때 속성을 변경시켜줄 수 있다.
  • 링크선택자 : 문서에서 링크돼 있는 문자를 선택해서 css속성을 설정해줄 수 있다.
  • 부정선택자
    • #content li:not(.fa)

 

 

📌[블럭요소로 레이아웃 위치를 정렬할 때]

<!DOCTYPE html>
<html lang="en">
<header>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS1213 실습</title>
  <style>

    #head, #nav, #section, #footer {
      border: 1px solid;
    }

    body {
      overflow: hidden;
      width: 1000px;
    }

    #nav {
      width: 200px;
      float: left;
      height: 500px;
    }
    #section {
      width: 795px;
      float: left;
      height: 500px;
    }

    #footer {
      clear: both;
    }
  </style>
</header>
<body>
  <div id="head">
    <p>Head</p>
  </div>
  <nav id="nav">
    <p>Nav</p>
  </nav>

  <section id="section">
    <p>Section</p>
  </section>

</body>
<footer id="footer">
    <p>footer</p>
</footer>
</html>
  1. 위와 같이 head, nav, section을 감싸고 있는 body태그에 overflow: hidden;설정을 준다.
  2. 가로로 정렬할 nav와 section영역은 float:left;로 설정해준다.
  3. 맨 아래에 위치할 footer는 clear: both;로 설정해 위에서 설정한 float:left가 영향을 주지 않도록 설정해준다.
  • margin : 0 0 0 0; (top right bottom left) ⇒ 시계열 순서대로 돌아간다.
    • margin: 0 auto(top/bottom, right/left) ⇒ top과 bottom의 마진을 0으로 주고 right와 left를 auto로 설정하면 양 쪽의 여백을 동등하게 주기 때문에 가운데 정렬을 할 수가 있게 된다.
  • list-style: none
    • ul태그 사용시 앞에 점 표시를 없애준다.
  • display: block
    • 라인 요소를 블럭 요소처럼 개행해준다.
  • background-image: url(’’)

 

 

[CSS단위]

  • px(픽셀) ⇒ 16px이 디폴트값
  • %
  • em ⇒ 1.0em이 디폴트값(16px정도)

 

[display속성]

  • block - div, p, li
  • inline - span :
    • 옆으로 정렬되고, height속성을 설정해줘도 높이 속성이 적용되지 않는다.
      •  아래의 inline-block속성을 활용한다.
    • margin속성도 상,하는 적용되지 않고 좌,우만 적용된다.
  • inline-block : 옆으로 정렬되면서 block이 가지고 있는 높이의 속성도 가진다.
  • none : 아예 화면에서 보이지 않게 한다.

[visibilty속성]

  • display none과 비교했을 때 display none은 화면상에서 안보이고, 공간 마저 사라지지만 visibilty:hidden;의 속성은 화면에서만 보이지 않고, 공간은 유지돼 공백이 생긴다.

[opacity 속성]

  • 투명도를 조절한다. 0.0~1
  • 투명도를 0으로 설정하면 visibilty hidden과 같은 속성을 가진다.

[margin/padding속성]

  • margin : 요소의 바깥쪽 요소와 여백을 설정한다.
  • padding : 해당 요소의 안쪽으로 여백을 설정하게 되면서 해당 요소의 크기는 여백만큼 늘어나게 된다.

⇒ 회색 박스에서 padding을 주는 것과, 흰색 박스에서 margin을 주는 것은 엄연히 다르게 작용!

⇒ padding을 주게 되면 해당 값만큼 회색 박스의 값이 늘어나게 된다. 따라서, 크기에 변화를 주고 싶지 않다면 흰색 박스에서 margin을 주어 여백을 설정한다.

 

[background image속성]

  • background-size
  • background-repeat: no-repeat
  • background-attachment: fixed

[font/line속성]

  • font-family
  • font-size
  • font-style
  • line-height(행간 조절) ⇒ 문자열간의 행간 조절에도 사용되지만 박스 안의 텍스트 요소를 수직으로 가운데에 정렬하고 싶을 때도 사용할 수 있다.
    • line-height의 크기를 박스의 height크기만큼 똑같이 설정해주면 수직 가운데 정렬 가능
  • a태그 스타일에 text-decoration:none;속성을 주면 밑줄 사라진다.

[position속성]

  • absolute - 브라우저의 좌상단, 즉 (0,0)좌표에 붙는다.
    • top, right, left등의 속성을 사용해 좌표의 위치를 설정해줄 수 있다.
    • position : absolute
      • top : 50px;
      • left : 50px;
    • 어떤 요소 안에 있는 요소는 상위 요소의 좌표에 영향을 받는다.
  • fixed - absolute와 같이 좌표값에 의해 위치가 결정되지만, absolute와는 다르게 스크롤에 의해 영향 받지 않고 화면상에서 항상 같은 자리에 위치한다.
  • static - position의 기본 default값
    • position을 static으로 설정하면 top, left와 같은 속성들이 무시되고 block요소처럼 위치가 결정된다.
  • relative - 먼저 생성된 요소가 좌표의 기준이 된다.
    • 안쪽 요소에 absolute를 줄 때에는 항상 바깥쪽 요소를 relative로 준다. (암기)
  • z-index - 값이 클수록 가장 앞에서 보여진다.

[float속성]

: position속성처럼 요소의 위치를 설정하기 위한 속성

 

🌟float:left와 display:inline-block의 차이점

display: inline-block은 가로로 배치하면서도 기본 margin과 padding을 가지지만,

float:left로 배치하면 기본 margin과 padding이 없다.

(*float를 사용하면 clear속성으로 플로팅을 해제해야 다음 요소에 영향을 미치지 않는다.)

 

 

 

 

틀린 내용은 댓글로 정정해주시면 감사하겠습니다. 🙏

반응형

'Study > 2023' 카테고리의 다른 글

HTML5 총정리 / 시멘틱 코딩하기  (0) 2023.12.12
2023년 1회 sqld개발자 시험 후기  (8) 2023.03.30

관련글

댓글

티스토리툴바