CSS - 4. box의 개념을 알아보자
점점 본격적이 되어간다.
https://opentutorials.org/course/3086/18319
*생활코딩의 강의를 들으며 공부하였습니다.
우리의 최종 목표는 아래와 같은 모양의 홈페이지를 만드는 것이다.
*출처 : 생활코딩하지만 이를 위해서 우리는 박스와 그리드라는 것을 알아야 한다. 먼저 박스에 대한 개념부터 알아보도록 하자.
1. 박스 모델이 무엇일까?
먼저 box.html이라는 파일을 만들자. 그리고 기본적인 코드를 깔아주자. 필요하다면 아래의 기본 html 값을 복사 붙이기 하자.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>>WEB1 - HTML</title>
</head>
<body>
</body>
</html>
자 그리고 대략 wiki에서 복사해온 내용으로 제목과 링크를 달아주었다.
똑같은 태그임에도 <h1>과 <a> 태그가 가지고 있는 부피가 상당히 다른 것을 볼 수 있다. 이것이 가지고 있는 부피를 확인하기 위해 우리는 태두리 <border>을 그려 확인해보자
2. 테두리를 그려보자 - border
CSS로 테두리를 그리기 위해서는 3가지 구성요소가 필요하다 바로 선의 두께, 색깔, 모양(점선, 실선 등)
border-width:5px;
border-color:red;
border-style:solid;
<style> 안에 위와 같이 적용해주면 된다.
이처럼 h1 같은 제목 태그는 화면 전체를 사용하는 것(block level element)을 알 수 있다. 그렇다면 a와 같은 링크 태그는 어떨까?
딱 적용된 콘텐츠 량만큼만 범위(inline element)로 사용하는 것을 알 수 있다.
3. 부피를 키웠다가 줄였다가 - display:inline; / display:block;
h1처럼 화면 전체를 쓰는 태그들을 'block'이라 부른다. 물론 이것은 기본 설정값일 뿐, 따로 설정을 조정하면 h1도 a처럼 부피를 줄일 수 있다.
display:inline;
이것만 추가하면 쪼그라든다.
쪼그라들었다.마찬가지로 아래 태그를 추가하면 부피를 키울 수도 있다.
display:block;
커졌다!단지 각 태그의 디폴트 값이 inline이나 block 일 뿐이니, 원하는 크기대로 바꿔가면서 사용해보자.
4. 잠깐 중복 제거하고 가시죠 - <style> 복수 적용 시에는 간단하게 ,로
코드에 자꾸 선색깔, 굵기, 모양 등이 중복돼서 나타나면 코드가 길어지고 보기 싫다 style 태그는 쉼표(,)를 인식하니 짧게 정리해주자.
5. 잠깐! 한 번 더 줄여볼까요. - border로 다 모여봐!
잠깐, 우리는 여기서 한 번 코드를 줄 일수 있다. 영타 치기 귀찮은 분들을 위한 희소식이 아닐 수 없다.
h1, a{
border-width:5px;
border-color:red;
border-style:solid;
}
자 보다시피 border라는 단어가 자꾸 중복이 되어 나타난다. 아주 귀찮다. CSS를 만든 사람들도 어지간히 귀찮았는지 더 짧게도 가능하게 만들었다.
h1, a{
border:5px red solid;
}
자 어떤가, border 안에 픽셀, 색깔, 선타입을 순서 상관없이 골라잡아 넣으면 똑같이 적용 가능하다
코드 길이가 확 줄었다. 아주 행복하다.
5. 자 이제 다시, 박스 모델로 돌아가자 - padding, margin, width
지금은 h1 부분을 꽉 둘러싼 박스 모델을 좀 더 넉넉하게 만들어보자. 바로 패딩을 입혀주는 것인데 말 그대로 속성 값 이름이 패딩이다
padding:20px;
패딩을 두툼하게 입었다.자, 20픽셀의 패딩을 입혀주었다. 콘텐츠와 테두리 사이에 간격이 늘어났다.
패딩 입은 것이 두 개면 어떨까?
더블 패딩!둘 사이에 자동적으로 간격이 생겨났다. 저 간격을 없애보자. 간격을 팔아먹으면 '마진(margin)'이 남는다. 해서 마진을 없애면 테두리가 붙는다.
마진이 남지 않은 모습이다물론 마진을 늘릴 수도 있다.
또한 'width'를 이용해서 박스 모델의 크기를 특정 넓이로 제한할 수도 있다.
width:100px;
박스가 소심해졌다박스가 줄어들었다!
나중에 헷갈리면 검색하면 된다. CSS box model이라고 검색해보자
6. 검사!
만든 홈페이지에 오른쪽 클릭을 하면 '검사'라는 항목이 있다. 그것을 확인해보면 현재 적용받고 있는 css 코드와 그 범위를 한 번에 볼 수 있다.
웹페이지를 분석할 때 이 도구의 도움을 받으면 확실히 알 수 있다. 추후 복잡한 웹페이지를 만들 때 이것의 도움을 받으면 편리하다.
