https://dash758.tistory.com/11
[웹 개발 기초] 웹 개발 6일차 (라이브 서버 적용, HTML의 목록, 스타일 다시 꾸미기)
https://dash758.tistory.com/10 [웹 개발 기초] 웹 개발 5일차 (이미지 삽입 및 스타일링, 배경 스타일링, 홈 페이지 완성 및 두 번https://dash758.tistory.com/9 [웹 개발 기초] 웹 개발 4일차(링크 스타일 :hover,
dash758.tistory.com
지난 시간에는 수정사항이 있으면 새로고침을 통해 즉각적으로 웹 사이트에 반영하는 Live Server 익스텐션과 HTML에서 목차를 소개하는 방법, 웹 사이트를 조금 더 꾸며보았습니다.
이번 시간에는 CSS 박스 모델, HTML 구조, 선택자와 결합자, 클래스, 블록과 인라인에 대하여 알아보겠습니다.
요즘 개강하고 자격증 시험 공부하고 있어서 개인적인 시간이 없습니다....글 업로드 주기가 소흘해지는 점에서 반성하고 있습니다ㅠㅠ
CSS 박스 모델
CSS로 스타일링을 하면 그 텍스트는 공간을 갖게 됩니다. 그러나 지난 시간에 만들었던 웹 페이지의 텍스트를 감싸고 있던 백그라운드 공간은 너무나도 좁게 보였습니다. 이 공간을 넓히는 방법이 padding 명령어입니다. 텍스트와 테두리 사이에 공간이 생기면서 그 모습이 박스 형태이기 때문에 이를 '박스 모델'이라고 부릅니다.
#remain.css
a {
padding: 12px;
background-color: #38083b;
border-radius: 5px;
font-size: 24px;
}
이 코드를 저장하고 새로고침을 누르면 하이퍼링크 부분의 텍스트 배경이 더 넓어진 것을 알 수 있습니다.
padding: 5px 8px 5px 8px;
padding속성은 4가지 요소를 추가하여 스타일링을 할 수 있습니다. 순서대로 시계방향을 나타냅니다. 맨 처음의 5px는 위쪽으로, 두 번째의 8px는 오른쪽, 세 번째의 5px는 아래쪽, 마지막의 8px는 왼쪽을 나타냅니다.
앞서 테두리를 둥글게 만드는 명령어는 border-radius였습니다. 이번에는 텍스트 박스의 테두리를 꾸며볼건데, 다음 코드에서 새로 생긴 border 속성을 봐주세요.
#remain.css
a {
padding: 12px;
background-color: #38083b;
border: 5px solid #eac7ff;
border-radius: 5px;
font-size: 24px;
}
6번째 줄에 border: 5px solid #eac7ff; 와 같이 작성되었습니다. 차례대로 5px는 크기를 조정합니다. 그 다음에는 solid라고 되어있는데, 이것은 테두리의 모양을 결정하는 속성입니다. solid일 경우 텍스트 박스의 테두리는 실선이 되고, dashed라고 입력했을 경우 테두리는 점선이 됩니다. 마지막으로 #eac7ff는 연한 보라빛을 띄는 색상입니다. 이를 적용하면 다음과 같이 스타일링이 됩니다.
마지막으로 여백을 지정할 수 있습니다. padding을 통하여 공간을 넓혔는데, 넓힌 공간이 다른 요소를 침범하면 보기에 좋지 않겠죠. 그래서 여백을 추가할 수 있습니다. 이는 margin 속성을 통하여 구현할 수 있는데, 이전시간에 알아보았기 때문에 넘어가겠습니다.
정리하여, CSS 박스 모델에는 총 4가지 요소가 있습니다. 가장 중요한 텍스트, 그 공간을 넓혀주는 padding, 그 공간의 테두리를 꾸며주는 border, 마지막으로 페이지 내의 모든 텍스트 박스와의 침범을 하지 않도록 여백을 설정하는 margin 속성. 이렇게 총 4가지가 있습니다.
박스 모델을 이용하여 웹 페이지 더 꾸미기
박스 모델에 대하여 알아보았으니 이를 실제로 적용해보겠습니다. 변경한 코드만 작성하였습니다.
#remain.css
h1{
font-size: 48px;
margin: 20px 0; #추가
}
a {
padding: 12px 48px; #추가
background-color: #38083b;
border: 5px solid #eac7ff;
border-radius: 5px;
font-size: 24px;
}
ol {
list-style: none;
width: 800px; #추가
margin: 36px auto 0 auto; #추가
padding: 0 #추가
}
li {
padding: 7px; #추가
background-color: #fc3f81;
border-radius: 5px;
margin: 32px;
font-size: 18px;
}우선 margin과 padding을 통하여 각 컨텐츠간의 간격과 배경을 조절하였습니다. 만약 조절하려는 값이 0일경우 어떠한 단위도 필요하지 않습니다.
<ol> 태그를 보시면 auto라는 키워드를 확인하실 수 있습니다. 이는 컨텐츠를 중앙에 배치하기 위함인데, 텍스트를 중앙에 배치하는 것은 text-align: center;을 통하여 구현하였습니다. 이와 auto의 차이로, auto는 컨텐츠 그 자체를 중앙에 정렬한다는 차이점이 있습니다.
결과를 보아하니 아까보단 조금 더 나아진 것 같습니다.
HTML 구조
지금까지 만들었던 html 소스 코드에는 제목, 하이퍼링크, 내용 등이 있었습니다. 이들을 하나의 구역으로 묶을 수 있는데, 헤더 섹션<header>, 메인 섹션<main>, 푸터?<footer> 섹션으로 나눌 수 있습니다. 이렇게 구역으로 나누어서 코드를 수정한다고 해도 시각적으로 보이는 웹 페이지에는 차이가 없습니다. 그러나 코드를 작성할 때 나누어둔 구역으로 컨텐츠를 구분지어 내용을 작성하기에 수월할 수도 있습니다. 저는 다음과 같이 구역을 나누어 코드를 수정하였습니다.
#remain.html
<body>
<header>
<h1>Upcomming challenges!!</h1>
<a href="index.html">View Today s Challanges</a>
</header>
<main>
<ol>
<li>Project1 - Repeat what I learned about HTML & CSS</li>
<li>Project2 - Do the exercise on HTML & CSS</li>
<li>Project3 - Dive deeper into HTML & CSS and build more complex websites</li>
</ol>
</main>
</body>
선택자와 결합자
선택자
CSS에서 선택자에 대해 타입 선택자(Type Selector)와 ID 선택자를 알아보았습니다. 타입 선택자는 html의 요소를 꾸미는 선택자이고, ID는 그 중에서 특정 요소에 ID 이름을 추가하여 생성한 선택자입니다. 그러나 ID 선택자는 한 번만 사용할 수 있는 고유성 때문에 현재 여러개의 내용이 있는 <li> 요소에서 모두 적용이 되어버립니다.
현재 <li> 요소에는 총 4개의 목표가 있습니다. (원래 3개였지만 제가 임의대로 하나 추가했습니다.) 이 리스트들을 각각 다른 스타일로 정의하고 싶다면 어떻게 해야 될까요? 우선 나머지 선택자들 먼저 알아보겠습니다.
나머지 선택자들 중 하나는 그룹 선택자(Group Selector)입니다. 그룹 선택자는 여러 요소의 유형들을 함께 그룹화 합니다. 이후 CSS 코드로 일괄적으로 적용할 수 있습니다.
마지막으로 클래스 선택자(Class Selector)가 있습니다. 이는 ID 선택자와 비슷한데, HTMl 요소에 클래스를 속성으로 추가합니다. 클래스를 정의한 이름을 .class를 사용해 CSS에서 사용하면 됩니다.
ID 선택자와의 차이점은 ID 선택자는 앞서 말했듯 일괄 적용이라면, 클래스 선택자는 각각 스타일을 정의할 수 있다는 점입니다.
결합자
결합자란 서로 다른 선택자의 조합이며, 두 가지 종류가 있습니다.
먼저 조상 결합자입니다. 보통 클래스나 상속에 대해 배울 때 자식 클래스, 부모 클래스라는 표현을 쓰지만, 여기서는 조상이란 단어를 사용합니다. 조상 결합자는 모든 자손에게 동일한 스타일을 정의합니다.
또한 자식 결합자 역시 있습니다. 자식 결합자는 오직 자식에게만 스타일을 정의하는 방식입니다.
선택자&결합자 이용하기
#remain.html
<li>
<h2>Saturday 09-07</h2>
<p>Project1 - Repeat what I learned about HTML & CSS</p>
</li>
<li>
<h2>Sunday 09-08</h2>
<p>Project2 - Do the exercise on HTML & CSS</p>
</li>
<li>
<h2>Monday 09-09</h2>
<p>Project3 - Dive deeper into HTML & CSS and build more complex websites</p>
</li>
<li>
<h2>Tuesday 09-10</h2>
<p>Project4 - Practice advanced HTML & CSS concepts</p>
</li>
먼저 과제의 내용을 강조하고, 보충설명 하기 위해 코드를 위와 같이 수정해줍니다.
제목 내용의 <h1> 필드도 강조해줍니다.
#remain.html
<header>
<h1>Upcomming challenges!!</h1>
<p>These are my goals for the next days</p>
<a href="index.html">View Today s Challanges</a>
</header>
하지만 이렇게 했을때 아래 하이퍼링크 버튼과의 거리가 너무 짧아집니다. 이를 방지하게 위해 아래쪽에 여백을 추가하겠습니다.
#shared.css
p {
font-family: 'Fira Sans', sans-serif;
margin-bottom: 36px;
}
margin-bottom을 통해 구체적으로 여백의 위치를 설정할 수 있습니다.
그러나 이 방법은 모든 <p> 요소에 적용되어 과제를 알려주는 부분에도 똑같이 적용됩니다. 이를 방지하기 위하여 id 선택자를 사용해도 되지만(<header> 섹션에는 <p> 요소가 하나밖에 없기 때문에) 위에서 알아본 결합자를 사용해보겠습니다.
#remain.css
header p {
margin-bottom: 36px;
}
위 코드는 <header>의 자손 중 모든 <p>에 아래쪽으로 36px 만큼의 여백을 적용하겠다. 는 의미입니다.
이번에는 과제를 나타내는 목록 요소를 스타일링 하겠습니다. 현재 목록에는 <h2> 요소와 <p> 요소가 있습니다. <h2> 요소를 꾸미는건 문제가 안되지만,<p> 요소를 꾸미는것은 문제가 됩니다. 우선 <h2> 요소부터 스타일링 하겠습니다.
#remain.css
h2 {
color: #380502;
font-family: 'Oswald', sans-serif;
}
문제의 <p> 요소를 꾸며보겠습니다. 우선 앞서 알아본 결합자를 사용하면
#remain.css
main p {
margin: 12px;
}
이렇게 표현할 수 있습니다.
클래스
이번엔 클래스를 이용하여 <p> 요소를 꾸며보겠습니다. 클래스를 사용하면 같은 스타일을 적용할 특정 요소를 그룹화할 수 있습니다. 우선 <p> 태그에 다음과 같이 추가해줍니다.
#remain.html
<li>
<h2>Saturday 09-07</h2>
<p class="daily-goal">Project1 - Repeat what I learned about HTML & CSS</p>
</li>
새로 추가된 class="daily-goal" 를 모든 <p> 태그에 넣어줍니다.
클래스의 우선순위가 높기때문에 클래스의 내용이 우선 적용됩니다!!!!
이번에는 단락의 부분적인 내용을 강조해보겠습니다. 우선 앞서 추가했던 클래스를 전부 제거해줍니다. 이후 강조하고 싶은 단락에만 클래스를 새로 만들어줍니다. 저는 두 번째와 세 번째 단락에 추가했습니다.
#remain.html
<li class="highlight-goal">
<h2>Sunday 09-08</h2>
<p>Project2 - Do the exercise on HTML & CSS</p>
</li>
<li class="highlight-goal">
<h2>Monday 09-09</h2>
<p>Project3 - Dive deeper into HTML & CSS and build more complex websites</p>
</li>
이후 CSS 파일에서도 이 클래스의 스타일을 지정해줍니다.
#remain.css
.highlight-goal {
background-color: #f488ae;
}
그리고 헤더 부분과 메인 섹션 사이의 간격을 두고 싶기 때문에 여백을 늘려줍니다.
#remain.css
header {
margin-bottom: 64px;
}
블록 & 인라인 요소
지금까지 작성한 코드에서 일부 요소인 <h1>, <p>, <a>, <img> 요소를 그대로 북사해서 붙여넣어 봅시다.
무언가 이상한 점을 눈치 채셨나요?
어떤건 줄 바꿈되면서 수직으로 놓이고, 어떤건 줄 바꿈이 되지 않고, 수평으로 놓이게 됩니다.
이것이 블록과 인라인 요소의 차이점입니다.
먼저 블록은 그 자체만으로도 페이지 너비 전체를 사용하는 요소입니다. 그렇기 때문에 이를 복사할 경우 페이지의 위 아래에 놓이게 되는 것입니다. 대표적으로 <h1>과 <p>요소가 있습니다.
인라인 요소는 말 그대로 in-line, 줄 안에 있는 요소를 뜻합니다. 그렇기 때문에 추가를 해도 페이지 상에 수평으로 놓이게 되는 것입니다. 인라인 요소가 왜 줄 바꿈이 되지 않는 이유는 페이지의 흐름을 깨뜨리지 않도록 하기 위함입니다. 인라인 요소에는 <a>, <button>, <img>, <span>(글자를 강조하는 요소입니다.) 등이 있습니다.
자세한 내용은 아래 링크에서 확인 바랍니다.
https://developer.mozilla.org/en-US/docs/Glossary/Inline-level_content
Inline-level content - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
In CSS, content that participates in inline layout is called inline-level content. Most text sequences, replaced elements, and generated content are inline-level by default.
developer.mozilla.org
오늘의 결과
