https://dash758.tistory.com/12
[웹 개발 기초] 웹 개발 7일차 (CSS 박스 모델, HTML 구조, 선택자와 결합자, 클래스, 블록과 인라인)
https://dash758.tistory.com/11 [웹 개발 기초] 웹 개발 6일차 (라이브 서버 적용, HTML의 목록, 스타일 다시 꾸미기)https://dash758.tistory.com/10 [웹 개발 기초] 웹 개발 5일차 (이미지 삽입 및 스타일링, 배경
dash758.tistory.com
지난 시간에는 컨텐츠가 갖는 공간인 CSS 박스 모델, 헤더 섹션과 메인 섹션을다룬 HTML 구조, 선택자와 결합자, 클래스, 블록과 인라인에 대하여 알아보습니다.
이번 시간에는 블록&인라인, 블록 상에서만 발생하는 여백 겹침, 그림자 추가하기, 여백 값을 음수로 설정하기, 특정 텍스트 스타일링을 담당하는<span> 요소에 대하여 알아보겠습니다.
블록&인라인
지난 시간에 이어 블록과 인라인에 대하여 조금 더 알아보겠습니다. 간단히 말해서 블록은 수직상의 관계이고, 인라인은 수평상의 관계입니다. remain.css에서 <a> 요소의 padding값을 높혔을 때 웹 페이지에서 윗 줄에에 있는 단락을 가리는 것을 볼 수 있습니다. 또한 <a> 태그는 분명 헤더 섹션에 포함되어 있는데 헤더 섹션 구역의 컨텐츠에 일부가 포함이 되지 않는 것 또한 확인하실 수 있습니다.
이를 해결하기 위해서 블록과 인라인을 알아야 합니다. display 명령어는 컨텐츠를 어떻게 화면에 표시할지 결정합니다. display의 옵션으로는 block, inline, inline-block이 있습니다. 각각 블록처럼 설정할 것인지, 인라인처럼 설정할 것인지, 둘 다 할 것인지를 결정합니다. display를 이용하여 다음과 같이 코드를 수정하겠습니다.
#remain.css
#description {
margin: 0;
}
a {
padding: 12px 48px;
background-color: #38083b;
border: 5px solid #eac7ff;
border-radius: 5px;
font-size: 24px;
display: inline-block;
margin: 12px 0;
}
패딩 값을 높임으로써 발생되는 문제를 블록과 인라인을 통하여 해결하였습니다. 또한 인라인 요소는 원래 수직으로는 영향을 끼칠 수 없습니다. 그러나 인라인과 블록의 특징을 모두 갖게 함으로써 margin: 12px 0;을 통해 상하로 여백을 주어 웹 페이지의 위에 있는 단락을 가리지 않도록 하며, <a> 요소를 포함하여 헤더 섹션 컨텐츠 내에 전부 들어오도록 하였습니다.
여백 겹침
수직 여백, 블록에서 발생하는 현상인 여백 겸침 문제에 대하여 알아보겠습니다. 개발자 도구를 통해 헤더 섹션을 구성하고 있는 요소의 여백을 보시면 무언가 이상한 점이 보입니다. <h1>과 #desctiprion 사이의 여백을 보면, 두 여백의 길이를 합친게 아닌 더 큰 여백만 적용되고 있다는 사실입니다. 또한 #description과 <p> 사이의 여백을 보면, 이 둘은 각 여백을 더한 값으로 여백이 결정됩니다.
이러한 현상은 블록에서만 발생하며, 수직에 영향을 끼치기 때문에 발생한 현상입니다. 같은 예시로 메인 섹션의 리스트들의 여백을 보면 같은 현상이 일어나고 있음을 알 수 있습니다.
그림자 추가하기
박스에서 그림자를 추가하는 방법은 box-shadow 명령어를 사용하면 됩니다. 이 명령어에는 4개의 옵션이 들어가는데, 첫 번째 옵션은 그림자가 얼마나 오른쪽 방향으로 이동할지, 두 번째 옵션을 얼마나 아래쪽 방향으로 이동할지, 세 번째 옵션은 그림자의 투명도를 지정하고, 네 번째 옵션은 그림자의 색상을 RGB, RGBA로 지정할 수 있습니다.
#remain.css
li {
padding: 7px;
background-color: #fc3f81;
border-radius: 5px;
margin: 32px;
font-size: 18px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
저는 각각 2픽셀씩 움직였고, 그림자 색상은 검정색으로, 투명도는 0.2만큼 주었습니다.
또한 모든 헤더 섹션 내의 여백 값을0으로 지정하고, #description에만 여백을 12px만큼 지정해 주어 여백을 정리하여 코드상의 깔끔함을 추가했습니다.
홈페이지 갈아엎기
지금까지 알아본 내용들과 일부 요소들을 추가하여 홈페이지(Challange Helper)의 디자인을 갈아엎겠습니다.
우선 HTML 구조에 따라서 코드를 수정하겠습니다.
#index.html
<body>
<main>
<img src="images/challenges-trophy.jpg" alt="Trophy">
<h1>Max Challanges started at <span>8.23 Thr</span></h1>
<p id="today-challange">
Learn about the basics of web development - specifically dive into
HTML & CSS
</p>
</main>
<footer>
<p>Explore the<a href="remain.html"> full week</a></p>
</footer>
</body>
<h1> 요소 안에 <span> 이라는 요소가 있습니다. <span> 자체로는 비의미적이지만 이 요소의 역할은 특정 텍스트를 스타일링하도록 도와줍니다.
이후 메인 섹션을 스타일링 하겠습니다.
#styles.css
main {
width: 800px;
margin: 200px auto 72px auto;
background-color: #f4b46b;
padding: 24px;
border: 5px solid #2b1805;
border-radius: 8px;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}
이제 무슨 코드인지는 대충 짐작하시리라 생각합니다.
이미지를 더 스타일링 해보겠습니다.
#styles.css
img {
width: 200px;
height: 200px;
border-radius: 100px;
border: 6px solid #180000;
margin-top: -134px;
}
이미지에 외곽선 추가해주고, 위치를 조정했습니다. 그러나 margin 값이 음수입니다. 만약 여백 값을 양수로 한다면 이미지 위에 여백이 생기기 때문에 컨텐츠 박스가 위로 길어졌을 것 입니다. 이를 해결하기 위해 여백의 값은 음수로 설정할 수 있습니다.
위에서 언급했던 <span>요소를 스타일링 하겠습니다. 날짜를 강조하기 위하여 다음과 같은 코드를 추가해줍니다.
#styles.css
span {
color: #4d1414;
}
