내가 볼라고 만든 정리 안된 글 ^0^/

"생활에 가까운 컨텐츠, 디자인을 만드세요!" 이종찬 강사님

caniuse 잘 쓰기! caniuse

초심자들이 가장 많이 하는 실수, 일단 컨텐츠 바디에 넣고 시작하는 것.
전체적인 큰 틀이 가장 중요하다. 큰 틀을 우선적으로 해야한다.

css는 예술의 경계에 있기 때문에 큰 틀부터 작은 틀로 만들어 나가야 한다. 몸-머리-머리카락-눈
덩어리는 1개부터 시작한다.
가장 큰 덩어리부터 해결하고, 그 다음 덩어리 해결하고, 그 다음, 그 다음,,,

이렇게 큰 것부터(우선순위대로) 쭉쭉!
css에서 div는 선택자(selector)라고 부른다.

css 기본 틀 개념
;과 {}를 잘 찍어주어야 한다.
div 선택자는 type selectors라고 공식적으로 부른다.
background-color는 property(속성)이라고 부른다.
orange는 value(값)라고 부른다.

width가 지정되지 않은 현재 상태에서는 가로 한 줄 전체가 되는데,
부모 요소의 크키에 따라간다.
즉, div의 부모요소인 body의 너비를 기준으로 따라가는 것이다.

너비를 고정값으로 설정해 줄 수도 있다.
width: 800px;
너비가 줄어든 것을 볼 수 있다.

왜 div가 왼쪽 상단에 있을까?
우리나라는 왼쪽 기준!

여백의 기준을 주지도 않았는데
왼쪽이 떨어져있는 것을 알 수 있다.
개발자도구를 이용해보자 (항상 봐야함!)

사용자 에이전트 스타일시트 (우리의 브라우저가 제공해주는 스타일 시트를 의미)
margin : 바깥쪽 여백을 뜻한다.
브라우저가 디폴트로 갖고있는 스타일시트를 알 수 있다.
디폴트로 마진 8px을 갖고 있는 것이 보인다.

브라우저마다 기본 사용자 에이전트 스타일시트가 차이가 있으며, 내가 원치 않을 수도 있을 땐??
결국 우리는 사용자가 어떤 브라우저를 이용하던지,똑같은 화면을 제공하도록 css로 조정해줘여함!
따라서 body 선택자 css에 사용자에이전트스타일스트를 없애줘야한다.(재료손질부터하자!)

body {
    margin: initial;
}

initial : "초기의"라는 뜻.
초기값을 정해주는 것. 즉 0으로 설정한다는 뜻이다.
margin의 initial value는 0!

width : auto;
부모 너비 기준으로 가득 참! width를 초기화하겠다.

각각의 property에 따라 '초기값'이 표현되는 것이 다르다.
margin에서는 initial로, width에서는 auto로!
quiz) background-color의 이니셜벨류는 무엇일까? 검색해보기!
mdn > css > background-color 검색


정답은 transparent! 투명이라는 뜻!

height: auto;는 같은 auto이지만 width랑 의미가 다르다.
자식 기준으로 높이가 지정된다. (width : 부모기준으로 너비가 지정)
즉, div 안에 있는 컨텐츠의 높이만큼 차지한다.

margin : div기준에서 바깥쪽 여백

padding : div 전체 크기가 커지게 된다. 겨울이 되면 추워서 패딩을 입으니까 몸이 커진다^^

border: 전체 크기가 커지게 된다.

div 한줄을 다 샀다. 부모의 width값으로 다 산거라서 (블럭레벨 엘리먼트)
div를 또 써도 아래쪽으로 내려가진다.
그렇다면 오른쪽 빈공간은? 사용 가능한 공간!

width auto로 하면 옆 공간을 다 쓰게 된다.

margin: auto는 어떤 의미인가?
이 남는 공간을 여백으로 취하겠다는 의미이다.
margin-left : auto;
그니까 오른쪽에 있는 남은 공간을 왼쪽으로 하겠다!

그럼 content가 오른쪽으로 가게 된다.
margin right도 같이 쓰게 되면? 중앙 정렬하겠다!

그 둘을 합친
중앙 정렬의 요약 코드
margin: 0 auto;

블록레벨 엘리먼트의 중앙정렬 방법~
width: 400px
margin: 0 auto;

다음 덩어리!

아깐 큰 1덩이! 그 다음은 3덩이!
header/contents/footer로!

header 로고나 메뉴와 같은게 들어간다
contents 실제 변하는 내용물이 들어간다
footer 알려줄 정보가 들어간다.

즉,
body > div > div3덩어리가 있어야한다.

정말 최소한의 콘텐츠만을 두고 레이아웃을 만든다고 생각하기 항상!!
작업 순서가 중요하다.
css에서 가장 중요한건, 어떤 순서로 하느냐이다!

덩어리 3개를 나눈 후, 그 다음 단계는 무엇일까?
3등분의 차이가 눈에 보여야, 파악이 되어야, 다음 스텝이 보이기 때문에
3등분의 색상 차이를 둬야한다.
이때 div에 class를 지정해주어야한다. 그래야 각각의 css를 지정해줄수 있으니!

type selector는 초기값 설정하는 것 외에는 사용하지말자!(body margin:initial)
항상 클래스를 이용하도록 하기!!
클래스는 이름표를 단다고 생각하기!
즉, div에게 이름표라는 속성을 달아주는 거임! class도 속성 중 하나!

세 덩이를 묶어주는 div class 명은 주로 wrapper, container로 쓰임!

div wrapper
div header
div contents
div footer

성이 div 이름이 그 뒤인데
css에서
div.wrapper 성.이름
성 제외하고 부를 수 있음
.wrapper이렇게
앞에는 *.wrapper로 *가 생략된것
universal Selector가 생략 된 것이다
즉, 모든 타입에서 클래스명이 header인 애들을 다~적용한다.
따라서 만약
h1 class="header"
div class="header"
이렇게 두 타입이 있는데, div 해더만지정하려면
div.header{}로 하고
둘다 하려면 그냥
.header{}라고 하면 된다.

background-size:cover;
background-position:center;
background-attachment:fixed; 화면 꽉차게

다음 header 덩어리

3덩이 이미지, 이름, 설명

인라인 요소 : 베이스라인(전기줄)에 콘텐츠가(참새가) 맞춰서 된다.
이미지밑에 살짝 여백이 있는데, 텍스트를 위한 공간이 생기는 거임 gy처럼 꼬랑지 텍스트

이렇게!

q)img와 background url은 쓰이는 용도가 다른가요??
a)img는 내가 표현하고 싶은 컨텐츠인 경우에 넣구요. background-image는 단순히 데코레이션, 꾸미는 용도의 이미지 삽입일 때 활용합니다. 프로필 사진은 내가 표현하고 싶은 (전달하고 싶은) 컨텐츠임으로 img를 활용했습니다

그 다음?

type selector 초기화해주어야한다!!!!

quiz) h1과 p의 사용자 에이전트 스타일 시트 뭐가 있는지 확인해보세용~(개발자도구>요소)

부모에게 속성이 정해지면 몇몇은 자식에게도 상속하는 경우가 있다.
몇몇 프로퍼티만 상속이 된다.
어떤게 있을까??
기본 폰트 사이즈는 브라우저에서 설정한 사이즈(주로 16px)
폰드 속성은 부모가 적용되면 자식도 적용되는 속성특징을 가지고 있다.
em(엠이라고 읽음) 2em = 2*16px = h1헤드라인크기
개발도구에서 h1을 보면 사이즈 2em

상하단 마진도 발생하기 때문에 css로 초기설정을 해주어야 한다!

h1{
    margin: initial;
}

p{
    margin: initial;
}

뭔가 비효율적임!
한꺼번에 작성하자~ 그룹핑!

body, h1, p {
margin: initial;
}

폰트 사이즈 2em인 초기 설정도 맘에 안들어
h1{
font-size: initial;
}
그럼 16px가 된다.
근데 이렇게 하면 앙댕.
그렇게 되면, header에 font-size를 50px라고 하면 h1에 적용이 안먹힘
따라서 font-size: inherit;
inherit(상속) 폰트사이즈 나 부모 요소에 따라 상속받을랭~
해더의 폰트 사이즈를 h1이 받게 된다.

font-weight 굵기
font-weight : inherit 굵기도 상속 받을랭!

마진은 상속이 되는 프로퍼티인가요?
마진은 상속되지 않아요~

백그라운드 이미지, 백그라운드 칼라 상속되나요?
아니요~never
백그라운드 칼라는 항상 투명이 좋음~

상속 속성 궁금하면 mdn 에 들어가서 보면 상속에 yes/no 보면 된다.

⭐️따라서, 원래 상속이 지원되는 속성은 초기화 해줄때 inherit키워드 즐겨쓰쟝!!!!!!!
상속이 지원이 안되면 initial!!!!!!!!!!!⭐️

그다음 순서

레이아웃 잡기!

우선 header
가운데 정렬
이미지랑 텍스트가 가운데정렬이되려면?
text-aling:center
이미지 텍스트 모두 인라인이기 때문에 text-align에 반응하게 된다.
텍스트 색 변경
.header{
color: white;
}
header에 주어진 흰글씨색이 h1과 p 자식에 상속된다.

그렇다면 세로 가운데 정렬은 어떻게 할까?

이미지에 마진탑을 준다면?
이렇게 하면 절대 안됨
뭐가 문젤까영?

타입 셀렉터는 위험해!!
건들지마 절대 쓰면 안돼
초기화 할때만 쓰라고 했잔하~
그니까 img 타입셀렉터에 지정하지말고
class를 지정해줘서(class="profile") css적용해

img.profile {
    margin-top: 90px;
    border: 10px solid white;
    border-radius: 50%;
}

이렇게!!

h1에 폰트 사이즈를 지정하면 해더의 높이가 정해져있는 상태라 이상해짐
따라서 해더의 높이를 auto로 바꿔줘야함
백그라운드 사이즈 커버도!(공부해보기)
패딩도!

.header {
background-image: url(images/cover04.png);
background-size: cover;
height: auto;
text-align: center;
color: white;
padding: 50px 0;
}

h1{
font-size:100px
}
descendant selector 하위 선택자

헤더안에있는 모든 자손들을 (자식과 손자 모두) 선택하게 된다.
.header h1{}로 작성해주면 된다.

img.profile {
border: 10px solid white;
border-radius: 50%;
}
애도 정리차원에서
.header img.profile {
border: 10px solid white;
border-radius: 50%;
}
이렇게!

셀렉터 사이에 뭔가ㅏㄱ 추가적으로 들어갈수도 있다 combinator라고 부름 (결합자)
.header > h1 이런식 .header + h1 이런식
결합자 없이 띄어쓰기만 있으면 .header h1자체를
descendant selector라고 부른다

p를 수정해보자
p는 div와 같은 속성을 가지고 있다. 블록 속성!
width:auto 부모크기 기주느로 가득 찬다.
.header p{
border-top: 4px solid;
width: 300px;
margin: 20px auto;
}
텍스트 크기만큼 보더가 잡히면 좋겠다면?
width:fit-content로 해주면 된다.
can i use. com css 속성을 분석적으로 할 수 있는 사이트인데
여기서 fit-content를 검색하보면,
브라우저별로 지원이 되나 안되나 볼 수 있음
css는 버전이 있기 때문에, 확인해봐야한다. css2.1을 주된 버전으로 쓰고 있다.대부분의 ㅡㅂ라우저 적용됨.
몇몇 프로퍼티와 벨류는 어떤 브라우져에서 적용이 안ㄴ된다.
개발자는 보수적으로 접근을 해야하기 때문에,
모든 브라우저를 생각해야한다 ㅠ
그렇게 때문에 인터넷익스플로우러를 무시할 수가 없당 ㅜ
근데 곧 종료됨 ㅎㅎ ㄱㅊㄱㅊ~ ㅂ2~
fit-cnotent가 ie에서 안먹히니까
그 대신
display: inline-block;을 쓰자!

이미지는 주로 unsplash무료이미지

.wrapper{
background-color: #ddd;
width: 800px;
margin: 100px auto;
}

wrapper부분에 마진 저렇게 주면

header 부분 끝!

질문

q)text-align: center랑 margin에 auto 하는거 차이 설명해주실 수 있나요??

텍스트얼라인 센터로 인해 h1과 p가 가운데 정렬되었구나~가맞는 문장인가요? 정답은 x
마진 오토만이 블록엘리먼트인 h1,p를 이동시킬 수 있다.
근데 저기 보면 가운데 정렬 됐잖아요!
ㄴㄴ~ 인라인 요소만 가운데로 온거임. h1블럭은 여전히 ㄷ똑같음.

이로케
그 안에 글자만 가운데정렬됬을 뿐이지 그 박스는 고대로
h1으로 감싼다고 그게 블럭요소가 아니라 안에 텍스트는 인라인인것

inline 요소일때 텍스트어라인, block요소일때 마진으로 정렬하는 거아닐까요??

q)border-radius로 다른 모양도 가능한가요?
a)
.header img.profile {
border: 10px solid white;
border-radius: 40px; 모서리 40px깎기
}
모서리 지정해서도 가능

50%는 네모에서 절반을 기준으로 깎은거라 정사각현의 경우 정원이 된다.
200과 20을 나눠서 만들어지는 경우

css bordaer radius generator검색하면 다양하게 나옴~
border-radius generator

q)width:100%와 auto랑 무슨 차이인가요?
a)width:100% 부모크기로 계산된다.
auto도 마찬가지로 부모 크기로 계산된다.

도대체 뭐가 달라??

즉, auto는 마진 레프트 등 속성을 포함한 상태에서 부모 크기를 채우는 것이다. 좀더 유연해진다.
퍼센트는 부모를 기준으로 구한 값에 되기 때문에 그림이 밀림.

이렇게 다 포함한 상태에서 채움. auto가 더 좋음!

q) padding 으로 박스 크기가 커지는 걸 모르겠어요.
width,height+padding+border=박스크기임
box-sizing : content-box; 신기술임~ 그래도 거의 모든 브라우저에서 작동 됨!
200,200 t사이즈에서 보더를 안에 채워서 크기가 변함없게 지정할 수 있음.

footer부분~

a 태그를 추가한 순간 a에 적용되어 있는
user agent stylesheet를 박멸해야한다!!!!

개발자도구 > a부분 확인해봐!

이 부분을 초기화 해주자~(mdn으로 검색해보기)
text-decoration : 상속이 no 인데도 inherit이 가능하다고 나옴. 자식 반영할라면 inherit, 아니다 초기값으로 하겠다하면 initial (자기 마음! 상속시킬지말지)
생상 a initial하면 나중에 색깔 바꿔도 안먹힘. 따라서 색상은 inherit

cf)
초기화부분은 css맨 위에 의도적으로 따로 써주는걸 추천~
별도로 관리하고자!이렇게! 바디부분,h1을 보면 따로 해줬음! 구분지을라구!

이 사이 여백은 margin일까요,padding일까요?
응 둘다 아니야~
마진이었다면, 사용자스타일시트에 나왔었겠지~
정체가 뭐냐!
html에서 앤터 자체는 한칸의 띄어쓰기임 인라인 엘리먼트의 기본적인 속성임. 초기화 할 수 없는 부분임.

<a></a>
<a></a>

이렇게 엔터가 쳐져있으면 간격 한칸 생김
<a></a><a></a> 이건 안생김
폰트 사이즈에 비례하게 띄어쓰기 넓이도 커짐~em(엠 단위로 되어있음!:상대적 배수)

inline elements VS block-level elements

inline (전깃줄이라 생각하기~)
: width,height개념이 존재하지 않음
오히려 길이라는 개념이 좀더 자연스러움!
마진의 경우 baseline기준에서 배치되면서 좌우로만 여백이 생김!
패딩의 경우 적용이 되지만, 상하단 패딩이 시각적으로 보이긴 하지만 공간을 차지하진않음
이렇게 베이스라인은 움직이지않고 패딩 부분만 되는거라 ,,

보더는 정상적으로 작동됨! 되는데, 길면 보더가 중간에 끊김. 안돼~

따라서 나온 속성이 display!
display:표시하다라는 뜻!
display: block; 난 인라인으로 태어났지만 블럭으로 행동할것이야.
w,h,m,p이 적용됨을 볼 수 있다.

하지만 가로배치로 되어있던게, 한줄한줄로 되어있어서 킹받는다.
블록은 한줄에 하나씩이라 가로배치안되잔항
어떡하지?ㅠ
블럭을 베이스라인에 배치되게 설정할 수 있다. 바로
display: inline-block;
쨘~정상적~

텍스트베이스라인을 기준으로 배치된다!

inline-block;
width가 지정안되어도 텍스트 크기만큼 지정되기 때문에 width지워도 okay~
height도 마찬가지~

\

inline block 을 가운데 정렬하려면 어쩌지?

.icon:hover:{}
pseudo class라고 한다. 가짜인데 진짜인척하는!
아이콘에 마우스 오버했을떄 브라우저가 우리대신 클래스를 만ㄷ르어줘서 효과를 만들어준다.

contents 덩어리

div는 공통적으로 같은 클래스를 가지고 있다.

우선 눈에 보이기 위해 background color 지정
.section{
background-color: white;
}

그다음 공간을 마련해줘야함.
마진 20
패딩 20

근데 왜 두 섹션 가운데는 총 40이 아닌 20으로 잡히나요?
의도적으로 겹치게 구성되어 있음. 의도된 동작임! css 만든 사람들이 마진상쇄기능 만든거라 ㄱㅊ아~
하나로 통일되겠금 만듬 마진병합현상임! 블록형태의 상하단 마진은 합쳐진다~를 인지하고 있으면 된다.
h1,p도 저 위에 계속 겹쳐져 있었음~ 몰랐넹 ㅎ
블럭레벨 끼리만 발생함!!
하나가 블럭 하나가 인라인이면 적용 안됨! 블럭과 블럭끼리만!
자연스러운 스택의 일부일 뿐이니 오해하지 말쟈~
인라인 블록도 노 상관. 순수한 블록 레벨만!

그 안에 목차는 ul li를 사용하기~
뭐든 의미있는 마크업으로 해주려고 노력하기

.section li {

}

안좋은 방법임

.section ul li {

}
이게 정석!

li는 항상 ul과 한세트이기 때문에
ul로 크게 묶어서
하나의 덩어리라고 생ㅇ각하기
따라서 ul에 class를 지정해주는게 best!

이렇게 마우스 올리면 바뀌기완성~

background 부분 따로 공부하세열~

완성~

부모와 자식도 마진겹침이 일어남
8자 모양이아니라 H모양이됨.

같은 선상에서 부모 wrapper와 자식 box가 마진결합이된다.

모르겠으면 빔캠유튜브보기 마진결합편
그렇담 h모양을 만들고 싶으면? 부모에 패딩을 주면 된다.

별도로 공부할 내용

---

링크별로 색깔 다르게 하고 싶어!!
이미지가 달라!어떻게 다르게 적용할까?
section1 section2로 클래스 만들래~ 안돼
클래스는 한개 이상 사용할 수 있다!
숫자붙이지 말고 한칸 띄고 두번째 이름을 달자
다중클래스!!

section information
section skills
이렇게!
클래스를 여러개 쓰자

클래스1 클래스2 로 써서
안좋은 예!

다중 클래스를 이용해서
너무 좋은 예!

찐 완성 ~

우선순위는 이렇게 됨
중복 속성있을때,

cf)
이경우 파란색이 이길까 오랜지가 이길까?
마지막에 나오는 애가 우선적으로 적용이 되긴 함
파란~

이 경우엔 왜 보라색이 반영이 될가?

이 selector wow h1 h1이 얼마나 구체적이냐를 봐야함
구체적인 샐랙터일 수록 브라우저가 가치판단을 해서 중요한 정보를 가져온다.
.wow가 더 구체적이고 h1는 너무 광범위해서 .wow를 우선숭위로 두게 된다.

그렇게면 .다현{}, 임.다현{}
뭐가 더 우선순위가 될까?
임.다현{}이 더 가치가 높음 더 구체적!

그렇다면 서울.다현{}, 임.다현{}
뭐가 더 우선순위일까?
이럴땐 뒤에 있는 임.다현{}이 우선!

즉, 같은 수준이면 후에 써진거, 하지만 구체적이면 순서상관없이 우선

이경우, 다현다현!! 부른거니까 더 우선순위임

.wow .wow는 wow 하위의 wow를 뜻함
ㄷ안띄어쓰면 다중클래스이름부른거임!조심하기
h1{backgruond-color:blue !important;}>{h1 id="wow" style="backgrond-color:orange;>" >아이디 선택자 > 클래스 선택자 > 태그 선택자
금매달 > 은매달 >동매달

우선순위체크사이트

아래가 나쁜 예, 위가 진짜 좋은 예

• 위에가 일반적

🎃 호박 추가하기