22-09-02-TIL

YJ·2022년 9월 3일

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

목록 보기

6/56

🧐 오늘은 이종찬 강사님의 CSS 특강을 들었다.
아직 CSS에 대해 지식이 부족한 나에게 이번 시간은 너무나 유익한 시간이었다.

CSS 기초 탐구

1. 레이아웃 파악하기
시각적으로 볼 때 몇 개의 덩어리로 나뉘어 있는지 파악하고 들어가기

2. 가장 큰 덩어리 -> div 부터 만드는걸로 시작하기
시각적의 기본 div

3. div -> css로 꾸미기

<!-- body 요소와 div 요소는 부모와 자식간의 관계 -->
<body>
	<div>
  	</div>
</body>

/* 선택자 / 셀렉터라고 부름 / type selector */
div {
/* 속성 property : value 속성값*/
	background-color: orange;
}

initial value (초기값)

⚠️ 모든 프로퍼티에는 initial value가 존재하며 서로 다르다.

div {} 크기에 대한 property를 지정한 적이 없는데 기본적 width, height가 어떻게 세팅이 되어 있는지??

👉 width: auto;
	width: initial;
width의 초기값은 auto여서 최대 너비를 가질 수 있다.
width: initial;로도 명시 가능
부모 요소로부터 주어진 가능한 최대 너비

👉 height: auto;
	height: initial;
height의 초기값 또한 auto로 div의 컨텐츠 양만큼 잡힌다.
자식 (자신)이 가지는 콘텐츠 높이만큼 유연하게 가짐

🔍 auto의 의미 -> 부모 요소로부터 주어진 사용 가능한 너비만큼 가득찬다.
👉 보여주는 화면 자체에 짤리지 않으며 오른쪽에 여백 생김

🔍 100%의 의미 -> 꽈 차지만 width에 margin-left가 추가되어 삐져 나감 (스크롤 발생)

브라우저가 계산한 즉, margin, border, padding 등을 고려하여 유연하게 부모가 제공하는 최대 콘텐츠 영역 너비만큼 가득찬다.

❓ div가 기본적으로 왼쪽 정렬로 나오는 이유
👉 문화권에 따라서 다르다.

❓ div 하나 더 추가하는 경우 옆이 아닌 밑으로 추가되는 이유
👉 block level element는 한 줄을 다 차지한다. (부모가 제공하는 콘텐츠 영역 만큼)
남은 공간 : 사용 가능한 공간 --> 다음 div는 해당 공간을 사용하지 못한다.

padding, border, margin

padding -> 컨텐츠 바깥을 둘러싸는 영역
margin -> 바깥 영역

margin-left: auto;

block level element가 남은 사용 가능한 공간을 여백으로 모두 다 취함 -> box가 오른쪽으로 가버림

margin: auto;

상하좌우 모두 auto 값으로 -> 가운데 정렬
margin: 0 auto; -> 상하 0, 좌우 auto
margin: auto auto; -> block level element이기 때문에 밑 공간은 다른 div의 공간으로 상하 또한 -> 0

생각하기

HTML을 한번에 다 적으려고 하지 말기!! -> 최소한으로 작성
최소한으로 작성 -> 레이아웃 -> 추가적인 작성 
서두르지 말자!!

작성하기

Header (상단)
Contents (중간)
Footer (하단)		-> 서로 구분시키기 위해 파악하기 좋은 코드로 작성하기

사용자 스타일 리셋

기본적으로 사용자 에이전트 스타일 시트가 제공되어 있다.
initial value와는 다르며 브라우저에 따라 다른 값이 제공되어 있다.
⚠️ 우리가 의도한 디자인이 아니며 사용자의 브라우저에 따라 웹 페이지가 다르게 보일 수 있으므로 초기화 시켜주기
⚠️ 보통 css 첫 줄에 작성

h1 , p {
	margin: initial;
    padding: 0;
}

block level element vs inline element

margin: auto; -> 블록 레벨 요소로 블록이 가운데 정렬 (h1, p 포함)
text-align: center; -> 인라인 요소로 텍스트 가운데 정렬

가운데 정렬의 2가지 방법

👉 블록 레벨 요소 -> 
한 줄에 하나씩 사용 (width로 너비 조정해도 오른쪽엔 사용 가능한 공간으로 차 있음)
div, ul, li, h1-h6, p 등
안에 존재하는 text들은 inline 요소 (inline을 block로 감싸고 있는 것)
    
👉 인라인 요소 ->
text, image, a, span 등
블록으로 가운데 정렬? -> width로 너비 조정 -> margin: 0 auto;
text 가운데 정렬? -> text-align: center;
    
👉 이미지 가운데 정렬? -> inline 요소 -> text-align: center;
⚠️ 상위 요소에 text-align: center; 부여
블록 레벨에 text-align: center;를 부여하면 하위 모든 애들이 반응한다.

👉 상속 inheritance

상속 inheritance

상속이 안되는 프로퍼티들도 존재
주로 텍스트 관련 font size, color 등은 상속이 됨

부모에서 font-size: 40px; 한 경우
h1에서 이 사이즈를 적용시키고 싶으면 h1의 font-size: inherit;

background 이미지 짤리는 경우

background-size: cover;

직계 자식
'>' 같은 위치에 들어갈 수 있는 것들을 combinator 라고 부른다.

생각하기

HTML에서 시각적으로 움직이지 말자!!!
css로 해결하기
클래스로 공통 부분 작성하고 하위 클래스로 각각 세부내용 다루기

inline element -> a

width, height 개념이 존재하지 않음 (line-height는 존재)
-> margin 줄때 좌우로만 적용됨
baseline!!!!

CSS 작성되는 순서가 중요??

중요하긴 하지만 selector의 구체적인 정도가 더 중요하다.
같은 클래스 이름 여러번 사용 -> 더 구체적
동점 -> 순서가 중요하다 (나중에 쓰인것이 선택)

이미지

수업 시간에 만든 화면
나중에 여러가지 추가해 봐야겠다. 😁😁

느낀점

생각보다 css 기본적인 부분에서 고려해보지 못한 부분들을 오늘 생각해보게 되었다.
앞으로 코드를 작성할때 오늘 배운 부분들을 고려하면서 작성해야겠다. 😁

함께 배워나가고 싶습니다!

이전 포스트

22-09-01-TIL

다음 포스트

1주 차 주간 회고

1개의 댓글

힛짱

2022년 9월 3일

와아아 유진님 정말 꼼꼼하게 TIL을 작성하셨군뇨.. 저도 특강 듣고 전혀 고려하지 못했던 부분을 배울 수 있어서 너무좋았어요!!! 유진님의 벨로그에 감탄하구 갑니닷...! 👏👏

답글 달기

22-09-02-TIL

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

CSS 기초 탐구

initial value (초기값)

padding, border, margin

margin-left: auto;

margin: auto;

생각하기

작성하기

사용자 스타일 리셋

block level element vs inline element

가운데 정렬의 2가지 방법

상속 inheritance

background 이미지 짤리는 경우

.header > img

생각하기

inline element -> a

CSS 작성되는 순서가 중요??

이미지

느낀점

22-09-01-TIL

1주 차 주간 회고

1개의 댓글