TIL 04.01

blueprint·2022년 4월 3일
CSSTILhtml
0

멋쟁이사자처럼 프론트엔드 스쿨

목록 보기
5/24

종찬 님 특강

명칭 정리

div {
	background-color: orange;
    width: 800px;
}

div: 타입 선택자
background-color: 속성(property)
orange: 값(value)

div의 크기는 부모 요소의 크기에 관련해 결정됨
width는 국가에 따라 기준이 달라진다 (ex 한국은 왼쪽, 아랍은 오른쪽)

auto

width: auto;
부모 기준으로 높이 자동 조절
height: auto;
부모가 아닌 자식 기준으로 높이 자동 조절
margin-left: auto;
자동으로 좌측 여백을 취하겠다 → 오른쪽으로 이동
margin-right: auto;
자동으로 우측 여백을 취하겠다 → 왼쪽으로 이동
margin: 0 auto;
블록 요소의 가운데 정렬 방법 (width 값이 필요함)

  • 0: 위아래 여백
  • auto: 남는 여백을 양쪽으로 취하기 때문에 중앙 정렬 가능해짐
    위아래 여백 없이 좌우 균등하게 여백 주며 가로 가운데 정렬
width: 400px;
margin: 0 auto;

initial

기본 초기값을 명시적으로 쓰는 것
IE에서는 지원하지 않기 때문에 잘 쓰지 않고 0으로 많이 씀

✔️ TIP
background-color의 initial value는 tranparent

inherit

상속되는 속성이 있고 되지 않는 속성이 있으니 검색해 볼 것
원래 상속이 지원되는 속성은 초기화 할 때 inherit 키워드 즐겨 쓰자
상속이 지원되지 않으면 initial

background-position

%: 기본값은 0% 0%

  • 앞의 값은 x축, 뒤의 값은 y축을 의미
  • right, left, center는 x축, top bottom은 y축을 의미

이미지 스프라이트 기법 사용 시에 사용하면 편리

  • 이미지 스프라이트(image sprite): 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지

  • 이미지를 하나만 관리할 수 있다는 장점이 있음

  • 이미지 예시

  • 코드로 사용하는 법
    해당 코드처럼 입력하면 모든 아이콘마다 적용될 hover 기능을 하나씩 적어야 한다는 번거로움이 있다

.icon.github {
  background-color: black;
  background-position: left top;
}
.icon.facebook {
  background-color: dodgerblue;
  background-position: center top;
}
.icon.email {
  background-color: orangered;
  background-position: right top;
}
.icon.github:hover {
  background-position: left top;
}

.icon.facebook:hover {
  background-position: center top;
}

.icon.email:hover {
  background-position: right top;
}

background-position-y 사용해 한 번에 해결 가능

.icon:hover {
  background-position-y: bottom;
}

text-align: center / margin: 0 auto

inline일 때 text-align, block 요소일 때 margin

부모에게 text-align: center;를 주고 <h1>, <p>를 작성

  • 가운데 정렬이 된 것처럼 보일 수 있음
  • 그러나 <h1>, <p>는 블록 요소이기 때문에 박스는 고정, 글자만 가운데 정렬되는 것
  • 안의 텍스트는 inline인 것

width: 100% / width: auto

둘 다 부모 요소가 가지고 있는 너비만큼 꽉 채운다는 점은 동일

  • width: 100%
    : margin, padding, border 값이 조금이라도 주어지면 부모 요소의 너비 초과
  • width: auto
    : margin-left를 자동으로 포함해서 계산하여 움직임, 좀 더 유연한 개념

inline & block elements

inline

  • 종류: <a>, <span>, <em> etc
  • width와 height 속성 적용 안 됨
    margin: 20px; 로 값을 줄 경우 위아래는 적용되지 않음


padding: 20px;로 값을 줄 경우 보여지기는 하지만 상하단이 공간을 차지하지는 않음

a 태그 최초 작성 시 가로로 배치된 것을 확인할 수 있음

Github Facebook Contact

인라인 요소의 특징

  1. 한 줄씩 줄 바꾸어 작성할 경우 요소들 사이에 공백 생김
  2. 한 줄에 한꺼번에 작성 시 공백 사라짐

block

종류: <div>, <p>, <h1> etc

  • width, height, padding, margin 속성 모두 적용 가능
  • 블록 요소는 한 줄이라는 땅을 다 샀다고 생각하면 됨
  • 블록 요소에 인접한 상하단 margin은 겹친다
<div class="wrapper">
  <div class="box">A</div>
  <div class="box">B</div>
</div>
.wrapper {
    margin: 100px auto;
    width: 260px;
}
.box {
margin: 30px;
}

부모와 자식 모두가 블록 요소일 경우에 margin을 주면 위아래 margin이 눈에 안 보일 수 있음
이유: margin이 겹쳐 margin 상쇄 일어남
→ 부모의 margin이 100으로 더 크기 때문에 부모 margin이 적용되고 자식의 margin 30은 그 안에 포함되어 있는 값이 되는 것

.wrapper {
    margin: 100px auto;
    width: 260px;
    padding: 1px;
}
.box {
margin: 30px;
}

padding을 주게 될 경우 부모와 자식의 margin이 분리됨
혹은 overflow: hidden;이나 display: flow-root;로도 해결 가능
overflow는 IE를 고려한 선택, flow-root는 IE가 빠진 밝은 미래의 해결책

display

display: block;
inline으로 태어났지만 block으로 살겠다는 의미

display: inline-block;
블록 요소이지만 인라인 형태로 쓰고 싶을 때 사용
기준점: 텍스트의 베이스라인

height 속성을 제거하면 text의 양만큼 씀

background-color: orange;
padding: 20px;
display: inline-block;

선택자 우선순위

같은 요소가 여러 선언의 대상이 된 경우 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법
점수가 높은 선언이 우선
점수가 같은 경우 가장 마지막에 해석된 선언이 우선

.wow {
background-color: blue;
}

.wow {
background-color: purple;
}

같은 클래스에서 동일한 속성 작성 시 나중에 작성한 속성이 적용

#wow {
background-color: aqua;
}

.wow.wow {
background-color: purple;
}

h1.wow.wow2 {
background-color: blue;
}

h1 {
background-color: orange;
}

h1 {
background-color: blue;
}

우선순위를 높여야겠다고 판단되면 붙여쓰면서 클래스 강조
.wow .wow : wow 클래스 하위의 wow 클래스
.wow.wow : wow 클래스 강조하며 우선순위 높임

TIPS

지키면 편한 css 작성 순서

  1. 전체적인 덩어리를 먼저 나눌 것
  2. 각 요소들이 차지하는 공간 확인을 위해 background-color 같은 속성 부여하여 시각적인 힌트 줄 것
  3. 안에 내용물을 넣기 전에 공간부터 마련하는 레이아웃 스타일부터 짤 것 (margin, padding 설정)
  4. 요리 재료 손질 먼저 할 것(요소, 타입 셀렉터 이용) 가장 담백한 상태로 만들 것 (inherit, initial(IE 박멸), margin: 0; padding: 0;(IE 지원하고 싶을 때))
  5. 이후에 세세한 작업 시작할 것 (class 이름 부여)

css 작성 시 공통적인 부분 + 스타일 초기화 부분은 가장 위로 뺄 것

여백 관련

div {
	margin: 10px;
    padding: 15px;
    border: 10px solid royalblue;
}

margin: 외부 여백
padding: 내부 여백
설정하는 만큼 요소의 크기가 커짐
border: 테두리를 설정해 주는 속성
border의 굵기는 width에 더해짐

다양한 border-radius 경험해 보기

https://9elements.github.io/fancy-border-radius/fancy-border-radius.png

선택자 작성

타입 셀렉터는 위험하다!
후손 선택자로 작성할 것

profile
blueprint
이전 포스트

TIL 03.31

다음 포스트

TIL 04.04

0개의 댓글