[DAY4] CSS 기초, CSS 레이아웃

유진·2023년 7월 11일
CSS강의정리
0
post-thumbnail

CSS 기초

Absolute Positioning

normal flow. vs absolute positioning

  • normal flow
    • element가 HTML 코드의 순서에 따라 간단히 배치된다.
      position: relative;
  • absolute positioning
    • 주변 element에 영향을 미치거나 받 않으며 겹칠 수 있음
    • 상대적으로(relative) 배치된 컨테이너 기준에서 top, bottom, right, left를 기준으로 위치를 지정한다.
    • (부모 요소가 static으로 디폴트 상태일 때) view port를 기준으로 배치된다. (view port: 현재 화면에서 보이는 부분)
      position: absolute;
❗ 복잡한 레이아웃을 만들 때 absolute positioning 남용해선 안된다. 좋아요 버튼과 같이 작은 단일 element들에 대해 사용하는 것이 좋다.

position 추가 설명

CSS의 position 속성은 요소의 위치를 지정하는 데 사용된다. position 속성은 다음과 같이 다섯 가지 값으로 설정할 수 있다:

  1. static
    • position: static은 요소의 기본값이며, 일반적인 문서 흐름(flow)에 따라 배치된다.
    • top, right, bottom, left, z-index와 같은 추가적인 위치 조정 속성을 사용할 수 없다.
  2. relative
    • position: relative은 요소를 일반적인 문서 흐름에 따라 배치한 후, 자기 자신을 기준으로 위치를 상대적으로 조정한다.
    • top, right, bottom, left, z-index 등의 속성을 사용하여 위치를 조정할 수 있다.
  3. absolute
    • position: absolute는 요소를 가장 가까운 부모 요소 중 position: static이 아닌 첫 번째 부모 요소를 기준으로 위치를 설정한다.
    • 부모 요소 중 하나에 position: relative, position: absolute, 또는 position: fixed 등이 지정되어야 자식 요소의 absolute 위치가 올바르게 동작한다.
    • top, right, bottom, left, z-index 등의 속성을 사용하여 위치를 조정할 수 있다.
  4. fixed
    • position: fixed는 요소를 뷰포트(화면)에 상대적으로 고정된 위치에 배치한다.
    • 스크롤이 발생해도 요소는 항상 동일한 위치에 고정된다.
    • top, right, bottom, left, z-index 등의 속성을 사용하여 위치를 조정할 수 있다.
  5. sticky
    • position: sticky는 요소를 일반적인 문서 흐름에 따라 배치하며, 스크롤이 특정 임계점에 도달할 때까지 상대적인 위치에 고정된다.
    • 임계점에 도달하면 일반적인 문서 흐름을 따라 이동한다.
    • top, right, bottom, left, z-index 등의 속성을 사용하여 위치를 조정할 수 있다.

Pseudo elements

pseudo class는 콜론 하나 만을 사용했고, pseudo element는 콜론 두 개를 사용한다.

::first-letter, ::first-line

pseudo element는 html에 존재하는 element는 아니며 CSS에서 선택하고 스타일링 할 수 있다.
(예) 단락의 첫 글자, 단락의 첫 줄, …


h1::first-letter{
  font-style: normal;
  margin-right: 5px;
}
h2::first-letter{
  font-size:80px;
}

::before, ::after

HTML에 새로운 요소를 추가하지 않고, 특정 요소의 내용(content) 앞과 뒤에 가상의 요소를 생성하여 스타일을 적용할 수 있게 해준다.

  • ::before

    • ::before는 선택한 요소의 첫 번째 자식 요소로 생성되는 가상 요소이다.

    • content 속성을 사용하여 생성된 가상 요소의 콘텐츠를 정의할 수 있다.

    • 가상 요소에 스타일을 적용하여 요소의 앞쪽에 임의의 콘텐츠를 추가할 수 있다.

    • 예시: 

      h2{
  position: relative;
}
h2::before{
  content:"TOP";
  background-color: #ffe70e;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 5px 10px;
  position: absolute;
  top: -10px;
  right: -25px;
}

  • ::after

    • ::after는 선택한 요소의 마지막 자식 요소로 생성되는 가상 요소이다.

    • content 속성을 사용하여 생성된 가상 요소의 콘텐츠를 정의할 수 있다.

    • 가상 요소에 스타일을 적용하여 요소의 뒤쪽에 임의의 콘텐츠를 추가할 수 있다.

    • 예시:

      h2{
  position: relative;
}
h2::after{
  content:"TOP";
  background-color: #ffe70e;
  color: #000;
  font-size: 16px;
  font-weight: bold;
  display: inline-block;
  padding: 5px 10px;
  position: absolute;
  top: -10px;
  right: -25px;
}
💡 pseudo element의 display 속성

대표적인 예시

  • ::before, ::after: display: inline
  • ::first-letter: display: inline
  • ::first-line: display: block

가상 요소는 일반적으로 inline으로 처리되지만, CSS를 사용하여 가상 요소에 직접 display 속성을 지정할 수도 있다.

Developer Skill

구글링 & 공식문서 읽기

모든 CSS property를 외울 필요 없다. ‘css + 원하는 기능’ 구글링해서 찾아보면 된다.

이 때,

  • W3schools → ❌ (좋지 않은 레퍼런스)

  • stackoverflow → ⭕ (개발자들의 많은 질문이 올라오는 곳. Q&A 사이트)

  • CSS-Tricks → ⭕

  • mdn → ⭕ (mdn documentation 제공

    • 예시

      border은 한 번에 여러 값을 적을 수 있는 shorthand 이고, 그 값은 border-width, border-style, 그리고 border-color이다.

      text-align은 블록 요소 내에서 적용된다. 따라서 <a> 와 같은 요소에 text-align을 적용해도 변화가 없고, <a>를 감싸는 block-box인 부모 요소에 text-align을 적용해야 가운데 정렬된다.

디버깅하고 질문하기

  • 제일 많이 하는 실수? tag close하지 않거나 오타가 있거나 property를 잘못 쓰는 경우.
    → 해결 방법: html validation tool 사용하기. https://validator.w3.org/ 에서 validate by direct input 에 코드를 입력하면 된다.
  • 클론 코딩하다가 원본 코드와 자신의 코드가 다를 때
    →https://www.diffchecker.com/ 에서 원본과 자신의 코드를 비교하면 된다.

CSS 레이아웃: Floats, Flexbox, Grid

레이아웃에는 Page Layout 과 Component Layout이 존재한다.

Float Layout

flexbox나 grid로 대체되는 부동 소수점 옛날 방식

💡 html에서 lorem을 쓰고 엔터를 누르면 가짜 텍스트들이 입력된다. 
/* FLOATS */
.author-img{
  float: left;
  margin-bottom: 20px;
}

.author{
  float: left;
  margin-top: 10px;
  margin-left: 20px;
}
  • float는 CSS 속성 중 하나로, 요소를 좌우 방향으로 띄워서 텍스트나 다른 요소가 주위를 감쌀 수 있게 하는 역할을 한다. float 속성을 사용하면 요소가 일반적인 문서 흐름에서 빠져서 주위 요소의 주변으로 이동하게 된다.
  • float 속성은 주로 다음과 같이 사용된다.
  1. 이미지와 텍스트 정렬: float를 사용하여 이미지를 텍스트와 나란히 띄워 정렬할 수 있다. 예를 들어, 이미지를 왼쪽으로 float: left; 설정하면 텍스트가 이미지의 오른쪽에 흐르게 된다.
  2. 다단 컬럼 레이아웃: float를 사용하여 다단 컬럼 레이아웃을 생성할 수 있습니다. 여러 개의 컬럼을 만들어 요소들을 나란히 배치할 수 있다.
  3. 레이아웃 요소의 배치: float를 사용하여 특정 요소를 다른 요소의 왼쪽이나 오른쪽에 배치하여 레이아웃을 구성할 수 있다.
  • Collapsing Element float 속성은 주의할 점이 있다. float된 요소는 일반적인 문서 흐름에서 빠져나오기 때문에, 부모 요소의 높이가 사라지는 문제가 발생할 수 있다. 이를 해결하기 위해 clear 속성을 사용하여 부모 요소를 float된 요소 아래로 밀어내는 것이 일반적입니다.

최근에는 float 속성보다는 Flexbox나 Grid와 같은 레이아웃 기술을 사용하여 더 강력하고 유연한 레이아웃을 구성하는 것이 권장되고 있다.

Clearing float

<header class="main-header">
        <h1>📘 The Code Magazine</h1>
        <nav>
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>
				<div class="clear"></div>
      </header>
h1{
	float: left;
}
nav{
	float: right;
}
.clear{
	clear: both;
}

Clearfix hack

<header class="main-header clearfix">
        <h1>📘 The Code Magazine</h1>
        <nav
          <a href="blog.html">Blog</a>
          <a href="#">Challenges</a>
          <a href="#">Flexbox</a>
          <a href="#">CSS Grid</a>
        </nav>
      </header>
h1{
	float: left;
}
nav{
	float: right;
}
.clearfix::after{
	clear: both;
	content: '';
	display: block;
}
profile
유진
이전 포스트

[DAY3] CSS 기초

다음 포스트

[DAY5] CSS 레이아웃

0개의 댓글