새싹 프론트엔드

[새싹 프론트엔드] 10/18~24 (CSS)

sognociel 2022. 10. 18. 16:41

06. CSS3는 무엇인가

CSS | HTML 문서의 색이나 모양 등 외관을 꾸미는 언어. CSS로 작성된 코드를 스타일 시트(style sheet)라고 부른다.

  • 색상과 배경
  • 텍스트
  • 폰트
  • 박스 모델(Box Model)
  • 비주얼 포맷 및 효과
  • 리스트
  • 테이블
  • 사용자 인터페이스

 

셀렉터 CSS3 스타일 시트를 HTML 페이지에 적용하도록 만든 이름. HTML의 태그나 클래스, 아이디를 이용한다.
프로퍼티 스타일 속성 이름. 약 200개 정도가 있다.
값 프로퍼티의 값

 

HTML 문서에 CSS3 스타일 시트 적용하는 방법

  • 인라인 스타일(Inline style)
    <태그이름 style="속성이음 : 속성값" />
    ex.) <p style="color: magenta; font-size: 30px">축구를 좋아합니다.</p>
  • 내부 스타일 시트(Internal style sheet)
    <head> 안에 <style>을 사용한다. style 태그는 여러 번 작성 가능하며 하나의 스타일 시트로 합쳐져서 적용된다.
  • 외부 스타일 시트(External style sheet)
    <head> 안에 <link>를 사용해 스타일 시트 파일을 불러온다.
    <link rel="stylesheet" href="./css/style.css" type="text/css" />
    <style>
      @import "./css/style.css"; 혹은
      @import url("./css/style.css");
    </style>

 

스타일 시트 우선순위

CSS3 스타일은 부모 태그로부터 상속받는다. 다만 본인이 새로 스타일이 지정이 되면 상속받은 스타일보다는 본인 스타일을 우선시한다.

<p style="color: green">
  자식 태그는 부모의 스타일을
  <em style="color: red; font-size: 25px">상속<em>받는다.
</p>

 

브라우저의 디폴트 스타일<외부 스타일 시트<내부 스타일 시트<인라인 스타일 순으로 우선순위가 높아진다.

 

07. CSS3 선택자

선택자 | 스타일을 적용할 대상을 선택하기 위해 사용

  • 전체 선택자 : 와일드 문자 *
  • HTML 요소(태그 이름) 선택자, 타입 선택자
  • 아이디(id) 선택자 #
  • 클래스(class) 선택자 .
  • 그룹(group) 선택자 : 스타일이 같은 두 태그를 묶음. 여러 선택자를 쉼표(,)로 구분하여 같이 사용한다.

 

우선순위
!important > 인라인 스타일 > id 스타일> 클래스 스타일> 태그 이름 스타일

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙인다.

/* blue가 아니라 red가 적용된다. */
p {
  color: red !important;
}
p {
  color: blue;
}


결합 선택자 | 두 개 이상의 선택자 조합
자식 선택자 | 부모 자식 관계인 두 선택자를 '>' 기호로 조합. 직계자식에만 적용된다.
자손 선택자 | 자손 관계인 2개 이상의 태그 나열. 직계가 아니어도 된다.
형제 선택자 | 다이렉트 형제는 '+' 다이렉트가 아닌 형제는 '~' 기호로 조합.

가상 클래스 선택자(pseudo-class) | 선택하고자 하는 HTML 요소의 특별한 상태(state)를 명시할 때 사용. 콜론(:) 앞뒤에 빈칸을 두면 안된다.

  • 동적 가상 클래스
    링크의 상태에 따라 각각의 스타일을 별도로 설정 :link  :visited  :hover  :active  :focus
  • 상태 가상 클래스
    입력 양식의 상태에 따라 각각의 스타일을 별도로 설정 :checked  :enabled  :disabled
  • 구조 가상 클래스
    HTML 요소의 계층 구조에서 특정 위치에 있는 요소를 선택할 수 있다. :first-child  :last-child  :nth-child  :nth-last-child 등

:hover는 반드시 :link와 :visited가 먼저 정의되어야 정상적으로 동작
:active는 반드시 :hover가 먼저 정의된 후에 정의되어야 정상적으로 동작

:link :visited -> :hover -> :active 순으로 가상 클래스 스타일 적용하기

 

가상 요소 선택자(pseudo-element) | HTML 요소의 특정 부분만을 선택할 때 사용

::first-letter 텍스트의 첫 글자만을 선택
::first-line 텍스트의 첫 라인만을 선택
::before 특정 요소의 내용(content) 부분 바로 앞에 다른 요소를 삽입할 때 사용
::after 특정 요소의 내용(content) 부분 바로 에 다른 요소를 삽입할 때 사용
::selection 해당 요소에서 사용자가 선택한 부분만 선택

 

속성 선택자 | HTML 태그의 특정 속성이나 특정 속성값을 가지고 있는 태그에만 스타일을 적용

[속성이름] 또는 [속성이름=“속성값”]

<body>
  <h1>[속성] 선택자를 이용한 선택</h1>
  <input type="text" />
  <h2 title="first_h2">이 제목은 title 속성을 가지고 있습니다.</h2>
  <p title="first_p">이 단락은 title 속성을 가지고 있습니다.</p>
  <h3>이 제목은 title 속성을 가지고 있지 않습니다.</h3>
</body>
input[type="text"] {
  color: red;
}

[title] {
  background-color: black;
  color: yellow;
}

[title="first_h2"] {
  color: blue;
}

 

속성 선택자 정리

[속성] 해당 속성이 있는 요소
[속성 = 값] 지정한 속성값이 있는 요소
[속성 ~= 값] 특정 속성값이 포함된 속성 요소 선택. 값이 정확하게 일치해야 한다.
[class ~= "button"] -> 클래스 값에 button이 포함된 요소
[속성 |= 값] 특정 속성값이 포함된 속성 요소 선택. 정확하게 일치하는 값이나, 지정한 값을 포함하는 요소를 선택한다.
a[title |= us] -> 속성값이 "us" 이거나 "us-"로 시작하는 a 요소
[속성 ^= 값] 특정 속성값으로 시작하는 속성 요소 선택. 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을 수 있다.
a[title ^= eng] -> title 속성이 eng로 시작하는 a 요소
[속성 $= 값] 특정한 값으로 끝나는 속성 요소 선택.
[href $= xls] -> href에 링크된 파일 확장자가 xls인 요소
[속성 *= 값] 일부 속성값이 일치하는 요소 선택.
[href *= mdn] -> href의 속성 값(링크) 중 mdn이 일치하는 요소

 

08. CSS3 단위속성

  • 키워드 단위
  • 크기 단위
  • 색상 단위
  • URL 단위

키워드 단위 | 키워드를 입력하면 해당하는 스타일이 자동으로 적용된다. display: flex 등

 

크기 단위

상대크기

 em 부모 요소에서 지정한 글꼴의 대문자 M의 너비를 기준(1em)으로 한 후 비율값을 지정한다. 부모 요소에 따라서 크기가 변경되어야 하는 경우에 사용한다.
rem 문서 시작 부분(root)에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정한다. 웹 페이지 내에서 항상 고정된 크기를 가져야 하는 경우에 사용
% 퍼센트
ex 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정한다.
절대크기 px 픽셀 수
cm 센티미터
mm 밀리미터
in 인치
pt 포인터. 일반 문서에서 많이 사용한다.

 

색상 단위

rgb(red, green, blue) rgb 색상 단위. 0부터 255사이의 숫자를 입력
rgba(red, green, blue, alpha) rgba 색상 단위. alpha는 opacity. 0.0은 완전 투명 상태, 1.0은 완전 불투명 상태
#000000 HEX 코드 단위. rgb 색상 코드의 16진수

 

URL 단위 | 이미지나 글꼴 파일을 불러올 때 사용

/* 이미지 */
body {
  background-image: url("./images/apple.jpg");
}

/* 폰트 */
@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans:400')

 

09. CSS 글자속성

  • font-size 속성 | 글자 크기를 지정하는 속성. 크기 단위 또는 키워드를 입력할 수 있음(large, medium, small 등)
  • font-family 속성 | 글꼴을 지정하는 속성. 단, 사용자 컴퓨터에 개발 시 사용된 폰트가 없는 경우를 대비해야 한다.
    해결 방법 1. font-family 속성을 여러 개 입력
    해결 방법 2. font-family 속성의 마지막에 serif체(명조체), sans-serif체(고딕체), monospace(고정폭 글꼴)을 입력
    ex.) { font-family: "없는 글꼴", Arial; }, { font-family: "없는 글꼴", sans-serif; }
  • font-style 속성 | italic, normal 등의 값으로 지정
  • font-weight 속성 | 글자의 두께를 조절하는 속성. 100~900 사이의 범위에서
  • text-align 속성 | 글자의 정렬과 관련된 속성. center(중앙 정렬), justify(양쪽 정렬) 등이 있다.
  • line-height 속성 | 줄 간격을 조정하는 속성. line-height를 해당 박스의 height와 똑같은 값으로 지정하면 세로로 가운데 정렬을 할 수 있다.
  • font 속성(단축 속성) | font : font-style font-weight font-size font-family 속성 값 사이에 ,로 구분을 주면 안 된다. font-family의 경우는 ,로 구분.
    font-size, font-family를 제외하고 생략 가능하다.
    ex.) 20픽셀로 이탤릭 스타일에 bold 굵기로 consolas체 -> font : italic bold 20px consolas, sans-serif;
  • text-decoration 속성 | 주로 하이퍼링크의 밑줄을 제거할 때 사용
    속성 값으로는 none, overline(윗줄), line-through(중간 줄)이 있다.
  • text-indent 속성 | 들여쓰기 기능
  • text-shadow 속성 | 글자에 그림자 효과. h-shadow v-shadow blur-radius color|none 속성 값 사이에 ,로 구분을 주면 안 된다.
h-shadow v-shadow 원본 텍스트와 그림자 텍스트 사이의 수평, 수직 거리(필수)
blur-radius 흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이
color 그림자 색
none 그림자 효과 없음

text-shadow는 여러 번 중첩할 수 있다.

.multiEffect {
  color: yellow;
  text-shadow: 2px 2px 2px black, 0px 0px 25px blue, 0px 0px 5px darkblue;
}

text-shadow를 여러 개 적용한 결과

  • text-transform 속성 | 영문자 표기 시 텍스트의 대소문자를 바꾸는 속성
capitalize 첫 번째 글자를 대문자로 변환
uppercase 모든 글자를 대문자로 변환
lowercase 모든 글자를 소문자로 변환
full-width 가능한 한 모든 문자를 전각 문자로 변환
  • letter-spacing, word-spacing 속성 | 자간, 단어간 사이의 간격 조절 속성

 

10. CSS3 배경속성

  • background-color : 컬러 코드 값 | 배경 색상 지정
    cf.) linear-gradient( to 방향 또는 각도, 시작 색상, 마지막 색상) 각도는 상단을 0deg로 시작해서 시계방향으로 커진다. 시작과 마지막 사이에 중간 색상을 넣을 수도 있음. radial-gradient(원형 그라데이션)도 있다.
    ex.) linear-gradient(to right bottom, blue, white) / linear-gradient(45deg, #f00, #fff);
  • background-image : url("파일 경로") | 배경 이미지 지정
  • background-size : 가로 세로 | 배경 이미지의 크기 지정
  • background-repeat | 배경 이미지의 반복 형태 지정
  • background-attachment | 배경 이미지의 부착 형태 지정
  • background-position | 배경 이미지의 위치 지정
  • background-clip & background-origin | 배경색 & 배경 이미지의 적용 범위 지정. 테두리까지인지, 패딩까지인지, 내용 부분에만 적용할지. 
  • background(단축 속성) | 한 번에 모든 배경 속성 입력

 

background-image에는 사진을 여러장 겹칠 수 있다.

body {
  background-image: url("../img/BackgroundFront.png"),
    url("../img/BackgroundBack.png");
  background-size: 100% 400px;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0px 50%;
}

사진을 한 장만 넣었을 때
사진을 두 장 넣었을 때

 

background-size 속성

cover 이미지 비율을 유지하면서 영역 전체에 꽉 차게 함. 다만 이미지가 잘릴 수 있다.
contain 원본 비율을 유지한다. 다만 영역 전체에 이미지가 채워지지 않을 수 있음

 

background-repeat 속성

repeat 이미지 반복
no-repeat 이미지 반복 안함
repeat-x x축 방향으로 이미지가 반복
repeat-y y축 방향으로 이미지가 반복

 

background-attachment 속성

fixed 배경 이미지를 화면에 고정. 스크롤을 해도 화면에 보인다.
scroll 스크롤 시, 배경 이미지는 스크롤 되지 않음

 

background-position 속성

bottom 배경 이미지를 아래쪽에 배치
center 배경 이미지를 중앙에 배치
left 배경 이미지를 왼쪽에 배치
right 배경 이미지를 오른쪽에 배치
top 배경 이미지를 위쪽에 배치
x x축 위치 지정. ex.)background-position: 1000px
x y x축, y축 위치 지정. ex.)background-position: 0px 50%

 

background-clip & background-origin 속성

border-box 박스 모델의 가장 외곽인 테두리까지 적용한다.
background-clip 에서 기본값.
padding-box 박스 모델에서 테두리를 뺀 패딩 범위까지 적용한다.
content-box 박스 모델에서 내용(콘텐츠) 부분에만 적용한다.
background-origin 에서 기본값.

 

background 속성 (단축 속성)

color image position/size repeat 순으로 값 지정

body {
  background: skyblue url("../img/BackgroundFront.png") center/800px 300px no-repeat;
}

 

11. CSS3 박스속성

  • 박스, box-sizing, 테두리 속성 | 웹 페이지의 레이아웃을 구성할 때 가장 중요
  • display 속성
  • visibility 속성 | HTML 태그를 출력할 것인지 숨길 것인지 지정
  • box-shadow 속성

 

박스 속성

개발자 도구에서 보여주는 박스 속성

content 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분
width 내용 영역의 너비를 지정
height 내용 영역의 높이를 지정
padding 내용과 테두리 사이의 간격, 눈에 보이지 않음
border 내용과 패딩 주변을 감싸는 테두리
margin 테두리와 이웃하는 요소 사이의 간격, 눈에 보이지 않음

margin과 padding의 경우 값을 하나 지정하면 4면 전체 적용. 2개 적용하면 첫 번째 값은 상하, 두 번째 값은 좌우. 4개 적용하면 시계방향(상 우 하 좌)으로 적용이 된다.

좌우 margin을 auto로 설정하면 가운데 정렬을 할 수 있다.

 

※ 마진 중첩 (collapsing margins)

인접한 두 박스가 온전한 block-level 요소일 경우 상하 마진이 서로 만날 때 큰 마진값으로 합쳐지는 것. 오른쪽 마진과 왼쪽 마진이 만날 경우에는 중첩되지 않는다.

단, 아래의 경우에는 마진 중첩이 일어나지 않는다.

  • 박스가 position: absolute 된 상태
  • 박스가 float: left/right 된 상태(단, clear 되지 않은 상태)
  • 박스가 display:flex 일 때 내부 flexbox item
  • 박스가 display:grid 일 때 내부 grid item

 

box-sizing 속성

border-box 테두리까지 포함해서 너빗값을 지정한다.
content-box 콘텐츠 영역만 너빗값을 지정한다. 기본값.

box의 border를 포함해서 width 200px 일 때, padding-left: 50px;을 주면 css는 content 부분을 유지하려고 해서 width는 기존 200px + padding-left 50px = 250px가 되어버린다. box-sizing: border-box; 은 padding이 추가될 때 content 부분을 유지하지 말고 기존 width 길이를 유지할 때 이용 (width는 200px, content는 150px로 감소)

 

테두리 속성

border-(방향. 생략가능)-width 테두리의 두께를 지정
border-(방향. 생략가능)-style 테두리의 스타일을 지정
border-(방향. 생략가능)-color 테두리의 색상을 지정
border-(방향. 생략가능)-radius 테두리가 둥근 사각형이나 원을 생성
값을 4개를 지정하면 왼쪽 상단을 시작으로 시계방향으로 radius 값이 적용된다.
border (단축 속성) 테두리를 꾸미는 여러 값을 한 번에 지정하는 단축 속성
border-width border-style border-color 순으로 작성한다.
ex.) 1px solid black

 

border를 넣을 방향을 지정할 때

div {
  border-left-width: 3px;
  border-left-style: dotted;
  border-left-color: blue;
}

 

각각 다른 border-radius

h1 {
  border: 3px solid red;
  border-radius: 0px 20px 40px 60px;
}

/* border-top-left-radius같이 다양한 방식으로 변경할 수 있다. */

 

display 속성

none 태그를 화면에서 숨기기. visibility : hidden ;과 달리 공간 자체가 없어진다.
block 태그를 블록 형식으로 지정
inline 태그를 인라인 형식으로 지정
inline-block 태그를 인라인-블록 형식으로 지정

키워드 비교

 

visibility 속성

visible 태그가 보임
hidden 태그에 출력 공간을 할당하고, 보이지만 않음. display : none ;과 달리 비워진 공간이 계속 남아있음 
<body>
    <h3>다음 빈 곳에 숨은 단어는 무엇일까요?</h3>
    <ul>
      <li>I (<span>love</span>) you</li>
      <li>>CSS is Cascading (<span>Style</span>) Sheet.</li>
      <li>다음 배울 과목은 (<span>JavaScript</span>)입니다.</li>
    </ul>
  </body>
span {
  visibility: hidden;
}

 

box-shadow 속성

box-shadow : h-shadow v-shadow blur-radius spread-radius color ;

h-shadow, v-shadow 원본 박스와 그림자 박스 사이의 수평, 수직 거리(필수)
blur-radius 흐릿한 그림자를 만드는 효과로 흐릿하게 번지는 길이
spread-radius 그림자 크기(디폴트 0)
color 그림자 색

box-shadow도 text-shadow처럼 여러 번 중첩할 수 있다

.multiEffect {
  box-shadow: 2px 2px 50px 2px black, 0px 0px 25px blue, 0px 0px 5px darkblue;
}

 

12. CSS3 위치속성

  • 위치 속성 | position 속성 (static, relative, absolute, fixed)
  • z-index 속성
  • overflow 속성 (cf. overflow-wrap과 word-break)
  • float 속성

 

위치 속성

위치 설정 방법

절대 위치 좌표 요소의 X좌표와 Y좌표를 설정해 절대 위치를 지정
상대 위치 좌표 요소를 입력한 순서에 따른 상대 위치를 지정

 

position 속성

static 상대 위치 좌표 설정, 브라우저의 디폴트 배치 방식.
HTML 태그의 작성된 순서대로 출력 위치를 정한다.
top, bottom, left, right 속성 값은 적용되지 않는다.
relative 초기 위치(element가 처음 위치한 곳)에서 상하좌우로 이동
absolute 부모 (position이 relative인 태그)를 기준으로 절대 위치 좌표 설정. 
fixed 화면을 기준으로 절대 위치 좌표 설정

 

position: relative; | 기본 위치(현재 태그가 놓인 위치)에서 left, top, bottom, right 속성의 값만큼 이동한 상대 위치에 배치

top/bottom가 동시 지정 시, bottom 무시
left/right가 동시 지정 시, right 무시

 

position: absolute; | 방향별 수치 입력 시 움직이는 방향은 relative와 동일하다. position:absolute;를 지정하면 사이즈가 content 크기로 줄어든다.

부모 태그에 relative를 정해주지 않았다면 body를 기준으로 이동한다. (부모의 position이 static 이면 계속 위의 부모를 찾아 올라가다가, 마지막이 body라면 body를 기준으로 잡는 것. 중간에 relative인 조상이 나타나면 그 태그를 기준으로 삼는다.)

.parent {
  border: 3px solid blue;
}

.parent2 {
  border: 3px solid green;
  position: relative;
}

.child {
  border: 3px solid red;
  position: absolute;
  top: 0px;
  left: 0px;
}

parent2에 relative 속성을 넣었을 때

.parent {
  border: 3px solid blue;
  position: relative;
}

.parent2 {
  border: 3px solid green;
}

.child {
  border: 3px solid red;
  position: absolute;
  top: 0px;
  left: 0px;
}

조상인 parent에 relative 속성을 넣었을 때

 

position: fixed; | 스크롤하거나 브라우저의 크기를 변경해도 브라우저 화면에 항상 보인다. left, top, right, bottom 속성 값으로 특정 위치에 고정

 

z-index 속성 | 속성 값이 클수록 위에 표시가 된다. z-index 속성이 없다면 제일 마지막에 작성한 코드가 최상단에 올라옴. 마이너스 값을 지정할 수도 있다.

 

overflow 속성 | 내부 요소가 부모의 범위를 벗어날 때 요소를 처리하는 방법. 블록 태그에만 적용된다.

visble 내용이 잘리지 않고 영역을 넘어 출력(디폴트)
hidden 영역을 벗어나는 부분을 숨김
scroll 스크롤 생성 (무조건 스크롤을 생성한다)
auto 내용이 부모 영역을 넘어가면 자동으로 스크롤 생성 (부모 영역을 넘어가지 않으면 스크롤이 생기지 않음)

cf.) overflow-wrap: break-word; 와 word-break: break-all; | 어떤 문자가 내용 칸 밖으로 넘치지 않게 브라우저가 단어 마디 안에 줄을 바꿔야 할 것인지 아닌지를 정할 때 사용한다.

mdn에 나와있는 예시

 

cf.) word-break | 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성

word-break: normal | break-all | keep-all | initial | inherit;

normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈한다.
break-all : 글자 기준으로 줄바꿈한다.
keep-all : 단어 기준으로 줄바꿈한다.
initial : 기본값으로 설정한다.
inherit : 부모 요소의 속성값을 상속받는다.

 

 

float 속성 | 태그를 오른쪽이나 왼쪽에 항상 배치 가능. 항상 같은 위치에 출력할 광고나 공지 등에 적합하다.

left 해당 요소를 문서의 왼쪽에 배치한다.
right 해당 요소를 문서의 오른쪽에 배치한다.
none 좌우 어느 쪽에도 배치하지 않는다. 기본값.

float 속성은 <p> 문단의 왼쪽이나 오른쪽에 이미지를 나란히 표시해야 할 때 사용한다. <p>가 블록 레벨 요소이기 때문에 이미지와 나란히 한 줄에 배치할 수 없기 때문이다.

img {
  float : left ;
}

 

clear 속성

left float:left 를 해제한다.
right float:right를 해제한다.
both float:left 와 float:right 를 해제한다.

float 속성을 사용해 웹의 요소를 왼쪽이나 오른쪽에 배치하면 그 다음에 넣는 다른 요소에도 똑같은 속성이 전달된다. 따라서 float 속성이 더 이상 유용하지 않다고 알려 주는 속성이 필요한데, clear 속성을 사용하면 된다.

<div class="box1">박스1</div>
<div class="box2">박스2</div>
<div class="box3 big-box">박스3</div>
<div class="box4 big-box">박스4</div>
div {
  width: 100px;
  height: 100px;
  margin: 5px;
}

.big-box {
  width: 400px;
}

.box1 {
  background-color: #ffd800;
  float: left;
}

.box2 {
  background-color: #0094ff;
  float: left;
}

.box3 {
  /* 박스3의 경우 float 속성을 지정하지 않았으므로 웹 브라우저의 기본 흐름으로 배치된다. */
  background-color: #00ff21;
}

.box4 {
  background-color: #a874ff;
  /* float: left; */
  /* clear: left; */
}

clear: left; 를 적용하지 않았을 때
clear: left; 를 적용했을 때
박스4에 float: left; 를 적용했을 때

 

13. CSS3 레이아웃

  • 정렬
  • One True 레이아웃
  • 절대 위치
  • 고정 위치
  • 글자 생략

 

정렬

수평 정렬 | 부모 태그에 overflow: hidden; 자식 태그에 float 속성 지정
자식 태그에 float를 지정하는 순간, parent는 높이를 잃어버린다. (자식 태그가 둥둥 떠다니기 때문에) 따라서 parent: hidden; 으로 자식을 감싸는 높이를 지정해 주어야 한다.

.parent {
  /* overflow: hidden; */
  border: 1px solid darkblue;
}

.child {
  float: left;
  margin: 0 3px;
  padding: 10px;
  border: 1px solid black;
}

parent에 overflow: hidde; 을 지정하지 않았을 때
parent에 overflow: hidde; 을 지정했을 때

 

중앙 정렬 | width를 원하는 넓이로 지정한 후, margin: 0 auto; 지정
그리드 시스템 | 화면을 쪼개서 레이아웃을 구성하는 것. 일반적으로 880px, 960px, 980px를 많이 사용

 

One True 레이아웃

부모 태그에 고정된 너비를 입력
수평 정렬하는 부모 태그의 overflow 속성에 hidden을 적용 (예시의 경우 left와 right를 가지고 있는 middle에)
자손 태그에 적당한 너비를 입력하고 float 속성을 적용.
만약 bottom에 clear 속성을 적용한다면 overflow: hidden;은 필요 없다.

 

절대 위치 | position: relative; 와 position: absolute; 를 이용하여 위치 조정

 

고정 위치 | position: fixed; 를 이용하여 위치 조정

 

글자 생략 | white-space와 ellipsis

 

white-space의 속성

normal 여러 개의 공백과 줄 바꿈을 하나의 공백으로 표시 (디폴트)
nowrap normal과 같지만 가로 폭의 범위를 넘어서면 줄 바꿈을 하지 않고 박스를 벗어나서 표시 
h1,
p {
  width: 300px;
  border: 1px solid red;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /*  한 행을 넘어가는 글자를 자동으로 생략 */
}

white-space: normal; 의 경우
white-space: nowrap; 의 경우
overfloe: hidden; 에 text-overflow: ellipsis; 적용

 

'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 1주차 블로그 포스팅'

'새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 2주차 블로그 포스팅'

저작자표시