위와 같은 이미지를 구현해보자.
위와 같이 간단하게 html 구조를 짜보자.
<head> 요소 안에 <link> 를 통해 style.css를 연결해주자. 그리고 title로 제목을 정해주자
그리고 body 요소 안에는 시멘틱 태그인 article 태그로 작성해보자. article태그는 보통 기사나, 포스터 등을 할때 사용한다고 한다. 이번에는 text가 많으므로 article을 사용해보자.
article 태그 안에 이미지를 연결해주고, alt의 속성을 통해 만약 이미지가 표시가 안되거나 로드가 되지 않았을 때 대신 표시할 대체 텍스트를 지정하는 것이다. 여기는 혼자서 하는거 이기에 그냥 빈 문자열로 놔둔다. 그리고 h1 태그를 해놓고 저 많은 텍스트는 어떤 것으로 담아야 할까? 라는 생각을 하게 되었다. 우리가 배웠던 것은 div 라는 아무것도 없는 것에 보통 담아뒀다. 하지만 이번에 p 태그로 담은 이유는, 텍스트가 많은 경우는 div 태그보다는 p태그로 담아두는 것이 좋다고 했다. 그 이유는 p태그는 문단을 의미하는 paragraph이며, 텍스트의 덩어리나 단락을 표현하는데 보통 사용을 하게 된다. 이;는 문서의 구조와 의미를 명확하게 전달하게 된다. 텍스트를 p태그로 처리했을 때, 사용자에게 더 나은 내비게이션 경험을 제공하게 된다. 또한 p 태그에는 기본적인 여백을 추가하여 문단간에 적절한 간격을 제공하게 된다. 이는 가독성을 높이는데 기여한다. 그리고 SEO(검색 엔진 최적화)에도 좋다. 그래서 p태그를 사용하게 되었다.
p태그 안에 긴 문장이 있는데 이는 Lorem이라고 Lorem ipsum의 줄임말로, 주로 인쇄 및 출판 산업에서 사용되는 더미 텍스트이다. 그래서 Lorem를 입력하면 자동완성으로 더미 문장을 사용할 수 있다.
간단하게 이미지를 넣고, 콘텐츠를 넣었으면 css로 스타일링을 해보자.
위와 같이 스타일링을 했는데, 차근차근 설명을 해주겠다.
p, body 에 margin을 주는 이유는 저기에 user agent stylesheet라고 기본적으로 margin 들어간다. 이는 각 브라우저마다 다르게 보여질 수가 있다. 그래서 일관된 기본 스타일을 적용하여, 서로 다른 브라우전 간의 차이를 최소화 하는 방법이다. 그리고 아래 body에 배경화면을 넣어준다.
article 태그에는 많은 스타일이 들어간다.
첫번째 실습과 거의 비슷한 내용들이다. margin: auto를 주어 가운데 정렬을 하고, padding으로 안에 여백을 조절해준다. 근데 여기에 border-bottom이라는 것이 있다. 이는 border 테두리를 bottom에만 부여하는 것을 의미한다. 근데 여기에 색상이 없다? 근데 color에만 적용을 했다? 이는 color의 경우는 부모요소에서 자식요소로 상속이 되는 것이다. 그래서 article안에 h1, p 태그가 있다. 그래서 h1, p에 전체적으로 color: red가 적용된 것이다. 상속이 되므로 중복적으로 적을 필요가 없기에 border-bottom에는 색상을 적지 않았다. 하지만 p태그의 경우는 글 색상이 검은색이 되어야 하기에 따로 color: black으로 설정해주었다. 그리고 현재에는 box-sizing이라는 속성이 없는데, 이는 margin과 padding을 컨텐츠에 포함을 시키는냐 시키지 않는냐에 따라 달라지는 것이다.
아무것도 설정을 해주지 않았을 때 기본값은 content-box이다. 이는 border과 padding을 별개의 값으로 보며 순수 컨텐츠 크기를 말한다. 근데 border-box는 width 값에 border와 padding을 포함시켜 계산을 하는 것이다.
이는 box-sizing에 기본값이다. 보면 콘텐츠를 보면 처음 우리가 설정해준 400px이 되어있다. 하지만 여기에 border-box를 설정해주면
우리가 처음 지정해준 400px안에 padding값이 포함되어있다.
그리고 h1 이다. 여기에는 원래 display: block이 되어있는데, 이는 한줄을 다 쓴다는 의미이다. 예를 들면 margin도 마찬가지로 auto를 주게되면 한줄을 다쓴다. 그래서 다른 공간을 가용공간이라고 하는데, 여기서 h1은 중앙정렬이 되어있을까? 라는 의문이 들수도 있다.
과연 정답은 무엇일까? article의 text-align: center의 상속으로 텍스트만 중앙정렬이 되어있고, h1를 표시하는 박스자체는 중앙정렬이 되어있지 않다. 그래서 이를 하기 위해서는 우리가 알고있는 중앙정렬 margin: auto를 주어 중앙정렬을 해준다.
그리고
여기서 밑줄이 있다. 근데 우리는 이렇게 만드는 것이 아닌 맨위 사진처럼 만들어야 한다.
이렇게 만들 수 있는 방법이 무엇이 있을까? 여러가지가 있다. 여기 자체에 margin을 주어 양옆 여백으로 강제로 줄이게 하는 것이다. 근데 이 방법의 경우는 만약 부모요소의 크기가 변하게 된다면 이 자체도 변하게 되기 때문에 안좋은 방법이다. 여기서 좋은 방법은 width를 줄이는 방법이 있다. fit-content라는 값을 주면 된다. 이는 콘텐츠의 크기에 맞게 줄여주는 것인데, 지금 h1이라는 텍스트 크기에 맞춰서 width를 줄여주는 것이다. 이러한 속성을 준다면 위와 같이 줄어들게 된다.
우리는 여러가지 배우게 되었는데
내가 예전에 헷갈렸던 것이 block 과 inline이었다. block의 경우는 div, ui, li, h1~h6, p 등이 있고, inline의 경우는 text, image, contents 등이 있다. 여기서 중앙정렬 하는 방법이 다르다. block의 경우는 요소 자체를 중앙 정렬하는거이기에 margin: auto로 중앙 정렬을 하게 된다. 여기에 중앙정렬을 제대로 하기 위해서는 중앙정렬하고자 하는 요소의 width를 지정해준다. 그러면 부모요소의 너비를 기준으로 중앙정렬을 하게 된다.
inline의 경우는 텍스트나, 이미지 이므로 text-align 속성을 사용하여 부모 요소내에서 중앙 정렬을 할 수 있다. 이는 블록 컨테이너 안에 있는 인라인 콘텐츠들을 중앙정렬을 하게 된다.
'HTML & CSS' 카테고리의 다른 글
| Block 레벨 요소, Inline 레벨 요소 (0) | 2024.08.03 |
|---|---|
| 100% 와 auto의 차이 (0) | 2024.08.03 |
| 간단한 css 실습하기 (1) (0) | 2024.07.25 |
| HTML 기본 구조 및 CSS 기본 가이드 (0) | 2024.07.25 |
| CORS / CORS를 위한 처리 / 해결방안 (0) | 2023.07.09 |
