항해 웹개발 종합반 1주차, HTML과 CSS

HTML은 뼈대, CSS는 꾸미기!

HTML은 구역과 텍스트를 나타내고(~옆에는 ~가 있어), CSS는 잡은 구역을 꾸며준다(~ 사이즈로 ~색상 할거야).

Head tag 안에 Style을 넣기에는 1억줄의 Style Code가 있다면, 정말 하나하나 보기가 어려울 것이다. 

HTML은 크게 '속성 정보'를 나타내는 Head와 '페이지의 내용'을 담는 Body로 구성된다.

꼭 Ctrl + Shift + L(자동 정렬), Tab(우측으로), Shift+Tab(좌측으로)을 눌러서 줄을 맞춰 주자. 정말 편하다.

 

div, span, p태그

div태그는 division의 약자로, '분할'을 이야기한다. 

p태그는 paragraph의 약자로, '문단'을 이야기한다.

div, p태그와 span태그의 가장 큰 차이는, 블록 요소인지 아닌지의 차이다.

블록 요소는 브라우저의 양 끝을 차지하지만, 인라인 요소는 자기가 쓴 만큼에 대해서만 차지한다.

=>div와 p는 줄바꿈이 되지만 span은 줄바꿈이 되지 않는다.

div 태그와 p태그의 차이점을 알기 위해서는 부모-자식간의 요소를 알아야 하는데, 

초록색 div와 파란색 div는 빨간색 div의 자식이다.

위와 같은 그림일 경우 빨간색 div는 초록색 div와 파란색 div의 부모이며,

초록색과 파란색 div는 빨간색 div가 변할 때 자동으로 변하게 된다.

같은 원리를 적용해서, 초록색 div의 속성을 변경할 경우,

'나는 버튼1'의 속성은 변하겠지만, '나는 버튼2'의 속성은 변하지 않는다.

<div>는 자식으로 블록 요소들이 올 수 있지만, <p>는 자식으로 인라인 요소밖에 올 수 없다.

따라서 div는 '문단을 나누는 역할'을, p는 실질적인 텍스트 정보를 입력하는 데 사용한다.

처음에는 div와 p를 혼용할 수 있겠으나, 조금씩 꼼꼼히 생각해 보고 용도에 맞게 사용하도록 하자 :0

 

ul, ol, li

ul태그는 unordered list, 순서가 없는 리스트를 얘기한다.

반대로 ol태그는 ordered list, 순서를 가지는 리스트를 말한다.

그리고 li로 list임을 말해준다.

 

CSS

css는 html 속 style 코드를 똑 떼서 하나의 sheet로 만든 것이다.

CSS를 설정할 때는 지칭할 무언가가 필요하다. (~를 꾸며줘 : ~를 지칭하는것이 필요함)

~는 class로 나타낼 수도 있고, id로 나타낼 수도 있다. 그리고 *로 전체를 지칭할수도 있다.

 

자주 쓰이는 CSS

CSS의 설정값들은 필요할 때 마다 챙겨서 보면 된다.

예를 들어 background의 설정값은 3개가 한 세트, display-flex는 4개가 한 세트라고 생각하자

.background{
	background-image : img의 url
	background-size : cover;
	background-position:center;
    
	display : flex;
	flex-direction : column;
	justify-content : center;
	align-items : center;
    
	#text-align : 문자를 정렬할 때 사용
	#border-radius : 이미지 귀퉁이를 다듬을 때 사용
	#width-max : 모바일 배려용으로, 단위는 %를 쓴다. ~%까지는 계속 배율 유지, 이이상으로는 원사이즈 유지
}

 

Margin과 Padding

Padding : 안쪽 여백

Margin : 바깥쪽 여백 (auto : 최대한 밀어라)

 

그러나 각각의 설정값은 외울 필요 없이, 아래와 같은 사이트에서 확인하는 것이 좋다.

https://www.w3schools.com/