2022.05.10 DAY 2 - HTML & CSS

성민규·2022년 5월 10일
CSShtml
0

CSS selector

CSS selector

선택자를 이용해 위와 같이 css를 작성할 수 있습니다.

아래처럼 class나 id가 selector일 때 태그와 결합할 수 있습니다.
첫 번째는 p태그이면서 p-tag 클래스입니다.
두 번째는 p태그이면서 third-line 아이디입니다.
p#third-line.p-tag
이런 조합도 가능하긴 하지만,
앱 통틀어 third-line이라는 아이디는 오직 한개이므로 위와 같이 tag+id+class의 조합은 과한 표현입니다.

여러 selector를 사용할 수도 있습니다.
아래 css에서 최종적으로 적용되는 selector는 span입니다.
selector가 서로 붙어있지 않고 스페이스로 띄워있다는 것을 주목해봅시다!

그런데 모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻입니다.
아래의 html에서 어떤 span 태그만 위의 css가 적용되는지 아시겠죠?

그렇습니다 가장 아래에 있는 "pre" 클래스 안에 있는 span에만 적용됩니다.

CSS Specificity

이제는 selector의 우선순위에 대해 알아보겠습니다.

p {
font-size: 30px:
}
.p-tag {
font-size: 15px:
}

위 css를 보시면 p태그와 .p-tag 클래스에 모두 font-size 프로퍼티가 있습니다.

<body>
  <p class="p-tag">나는 p태그</p>
</body>

p-tag 클래스를 적용한 요소가 p태그이기 때문에
font-size가 중복 적용되었습니다.
그렇다면 30px과 15px 중에서 어떤 값을 적용할까요?
정답은 p-tag 클래스에 적용된 15px이 적용됩니다.

selector의 우선순위는 다음과 같습니다.
tag <<<<< class <<<<< id <<<<< inline css

img

태그로 이미지 넣기

이미지를 웹 사이트에 추가하기 위해서는 img태그를 이용할 수 있습니다.

<img alt="HTML" scr="https://www.w3schools.com/whatis/img_js.png">

img태그에 속성을 알아보겠습니다.

  • alt : 이미지가 뜨지 않았을 때(서버에서 이미지가 삭제되었거나 잘못된 이미지 주소일 때...), 이미지 대신 보여줄 텍스트
  • src : 이미지 파일 경로 or 이미지 url 주소

    img 태그의 속성(attribute)에는 width, height가 있어서 html에서 직접 수정 가능합니다.
    하지만 유지보수나 좋은 코딩 습관을 위해 css는 항상 style.css에서 작성하는 것이 좋습니다.

    이미지의 사이즈를 조절할 때 가로의 길이만 수정하게 되면 원본의 세로 값으로 남아있는 것이 아니라, 가로의 길이 비율에 맞춰서 세로도 알맞게 줄어듭니다.

    이렇게 가로/세로 중에서 하나의 값만 입력하여도
    브라우저에서 알아서 같은 비율로 나머지 크기도 줄여줍니다.

background-image로 이미지 넣기

이미지를 넣는 방법에는 html에서 태그로 넣는 방법도 있지만 css를 이용해 이미지를 생성할 수도 있습니다.
우선 이미지를 넣을 영역을 설정해줍니다.

<div class="bg-img"></div>

그리고 bg-img 클래스에 배경이미지를 넣는 css를 추가합니다.

.bg-img {
	background-image: url("https://www.w3schools.com/whatis/img_js.png");
	}

그리고 크기를 조정하기 위해서 다음과 같이 코드를 작성할 수 있습니다.

.bg-img {
	width: 300px;
    height: 300px;
    background-size: 100%;
    }

가로 세로의 크기를 정해주고 이미지의 사이즈가 더 크거나 작을 수 있기 때문에 background-size로 지정한 크기 안을 채워줍니다.

Semantic Web, Semantic Tags

사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
img 태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 알아보겠습니다.

img 태그는 Semantic 태그이고 div 태그는 Non-Semantic 태그입니다.

위의 내용을 설명하기 위해서는
먼저 'Semantic Web', 'Semantic Tag'의 이해가 필요합니다.

Semantic Web

Semantic Web은 사전적 의미로 '의미론적인 웹'입니다.
즉, 문서의 의미에 맞게 어플리케이션의 의미에 맞게 구성된 웹입니다.

컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹.
또한 다른 의미로는 정보를 분석하여 그 정보의 관계 속에서 의미론적인 자료들을 추출하여 웹 상에 보여줄 수 있는 웹입니다.

텍스트 상으로는 이해가 다소 어려울 수 있지만 이렇게 생각해본다면 이해가 조금 쉬울 것 같습니다.
다음 예시 중 어느 예시가 검색엔진에서 웹 문서의 중요한 제목으로 인식하고 인덱스에 포함시켜 검색엔진에 노출시키게 될지를 한번 생각해봅시다.

<font size="6"><b>Semantic Web</b></font> 	(1번 예시)

<h1>Semantic Web</h1>						(2번 예시)

정답은 2번 예시입니다.

1번 예시와 2번 예시는 웹페이지에 표시되는 것은 똑같습니다.
1번 예시의 요소는 어떤 의미도 가지고 있지 않습니다. 그냥 텍스트에 디자인만 되어있을 뿐입니다.
2번 예시의 요소는 header라는 의미를 가지고 있습니다. 개발자의 의도한 요소의 의미가 명확히 드러나고 있습니다. 이것은 코드의 가독성을 높이고 유지보수를 쉽게합니다.

우리는 웹을 그저 시각적 형태로만 보는 것이 아니고 데이터들을 보여주는 것이기 때문에 이러한 마크업을 짤 때, 시멘틱 웹 개념을 생각하며 의미론적으로 마크업 구조를 짜고 태그들을 사용해야 합니다.
이제 Semantic Web이 어떤 것인지 이해하셨을 거라고 생각합니다.

Semantic Tags

Semantic Tags는 사전적 의미로 '의미론적인 태그'입니다.
즉, html5에 도입된 시맨틱 태그는 말그래도 의미있는 태그들입니다.

html5 이전의 html에서는 div 태그의 class와 id를 통해 정의를 하였는데
시맨틱 태그가 등장하고 나서는 의미를 정확히 전달할 수 있는 태그를 사용할 수 있게 되었습니다.

그렇다면 시맨틱 태그를 사용하면 어떤 장점이 있을까요?

Semantic Tags의 장점

  • 컨텐츠의 의미를 명확하게 전달해줍니다.
  • 검색엔진 등에 의미있는 정보의 그룹을 태그로 표현합니다.
  • 요소의 의미가 명확해지기 때문에 코드의 가독성이 올라가고 접근성이 향상되며 유지보수하기 쉬워집니다.
  • 검색 엔진 최적화(SEO:Search Engine Optimization)에 도움이 됩니다.

대표적인 Semantic Tags

  • header
  • nav
  • article
  • figure
  • footer

이외에도 여러가지 시맨틱 태그들이 존재하지만,
나중에 새로운 포스팅으로 Semantic Tags를 더 자세히 다뤄보겠습니다.

다시 본론으로 돌아가서 두 가지 방법 모두 장단점이 있기 때문에,
활용방식에 따라서 선택하여 이미지를 넣어야 합니다.

img 태그를 사용해서 이미지를 넣게 되면
Semantic Tag를 사용하는 것이기 때문에 시맨틱 태그의 장점을 활용할 수 있으며,
img 태그의 속성인 alt 값을 사용할 수 있습니다.
또 프린트가 필요한 경우에는 img 태그를 사용해야합니다.

  • 백그라운드 이미지는 출력시 포함되지 않습니다.

bakcground-image를 사용해서 이미지를 넣게 되면
div 태그를 사용하기 때문에 개발자가 의미를 부여할 수 있고 좀 더 유동적으로 사용할 수 있습니다.
또 이미지로써의 의미가 비교적 필요하지 않을 때 사용하면 좋습니다.

  • 일정부분만 선택해서 보여줄 경우
  • 이미지 위에 텍스트가 들어가는 경우
  • 페이지 출력시 이미지를 제거해야 하는 경우 등

이렇게 두 가지 방법을 필요한 상황에 따라 유동적으로 선택할 줄 알아야 합니다.
간단하게 정리하자면,
검색 엔진 최적화(SEO)가 필요하고 그 코드가 의미가 있다면 img 태그를 사용해야 하고
이미지로써의 의미가 중요하지 않다면 background-image 속성을 추가해서 사용하는 게 좋습니다.

[CSS] Block & Inline

Display & Float

block 요소와 inline 요소는 저번 포스팅에서 설명을 다뤘습니다.
그렇다면 한번 생각을 해봅시다.
우리가 홈페이지 디자인을 받아서 HTML 작업을 시작할 때,
inline, block 성질을 생각하면서 HTML 태그를 선택해야 할까요?
물론 대부분 inline, block 성질에 의해 태그가 결정되지만,
아무 태그나 사용해도 결국은 CSS를 통해서 얼마든지 성질을 바꿀 수 있습니다.
CSS property 중 'display'와 'float'를 이용하면 가능합니다.

p {
  display: inline-block;
}
p {
  float: left;
}
p {
  float: right;
}

위처럼 해당 property에 위와 같은 값을 부여하면,
요소 옆에 요소가 위치하는 inline 성질로 변하게 됩니다.

반대로 원래는 inline 성질을 가진 태그를 block으로 바꾸게 할 수도 있습니다.

span {
	display: block;
}

위의 CSS로 span 태그는 p 태그와 똑같은 성질을 갖게 되었습니다.

display: none;

display: none; 를 사용하면 HTML은 존재하는데 화면에 보이지 않게 됩니다.
어차피 안 보일 요소는 왜 작성하는 것일까요?

여러 이유 중 하나는 interactive한 웹을 구현할 수 있기 때문입니다.

예를 들어 네이버 검색창을 생각하시면 됩니다.
네이버 검색창에는 아무 것도 적혀있지 않지만 텍스트를 넣게 된다면 자동 완성으로 아래에 관련 목록이 나오는 것을 볼 수 있습니다.
원래는 해당 영역이 display: none;으로 보이지 않다가, 텍스트를 입력하는 순간
JavaScript가 검색 목록 요소에 다른 클래스로 교체할 것입니다.
많이 사용하는 기법이므로 짚고 넘어갑시다.

그 외에도 저번 포스팅에서 말했던 flex라는 값도 있습니다.
새로 추가된 기능이라 아직 생소하지만 워낙 유용해서 최근에 많이 쓰고 있습니다.
다음에 포스팅에서 제대로 공부해보도록 하겟습니다.

Margin Auto

레이아웃

block 요소일 때 width 값을 주면 더 이상 늘어나지 않게 됩니다.
이 때 margin에 auto로 설정하면 요소를 가로 중앙에 오게 할 수 있습니다.

p {
	margin: 20px auto;
}

다음과 같이 margin 값을 주게되면 어떻게 될까요?

margin에 값이 1개면 사방에 같은 값을 준다는 의미였고,
값이 4개면 '위/오/아래/왼'의 순서로 값을 준다는 의미였습니다.
이렇게 값이 2개만 있으면 첫 번째는 '위, 아래'의 margin이고,
두 번째는 '왼, 오른쪽'에 주는 margin이라는 뜻입니다.

위의 css를 풀어쓰면 아래와 같습니다.

p {
	margin-top: 20px;
    margin-right: auto;
    margin-bottom: 20px;
    margin-left: auto;
}

다시 auto 값에 대한 설명으로 돌아가면,
width 값을 가진 block 요소에 다음과 같이 margin을 주게되면 가로는 width 값으로 고정되고,
좌우의 나머지 공간은 균등하게 배분되어 여백을 갖게 됩니다.
마치 block요소를 가운데정렬한 것처럼 말입니다.

[HTML & CSS] List

List

목록을 표현하는 태그는 li 태그입니다.

<ol>
  <li>List</li>
  <li>Set</li>
  <li>HashMap (Dictionary)</li>
  <li>Queue</li>
  <li>Stack</li>
  <li>Tree</li>
  <li>Sorting</li>
  <li>Search</li>
</ol>

위의 코드를 아래와 같이 꾸며보겠습니다.

지금 코드를 보시면 li 태그를 ol 태그가 감싸고 있습니다.
ol 태그는 ordered list라는 의미로,
아래와 같이 목록에 숫자를 달아줍니다.

우리는 자동으로 numbering 되는 것을 원하는 게 아닙니다.
ol 태그를 ul 태그로 바꿔주겠습니다.
ul 태그는 unordered list라는 의미입니다.

<ul>
  <li>List</li>
  <li>Set</li>
  <li>HashMap (Dictionary)</li>
  <li>Queue</li>
  <li>Stack</li>
  <li>Tree</li>
  <li>Sorting</li>
  <li>Search</li>
</ul>

위의 코드를 실행하면 아래와 같습니다.

이렇게 브라우저는 태그에 따라 기본 스타일을 부여합니다.
아무 스타일도 넣고 싶지 않다고 li 태그만 사용하면 안 됩니다.
목록은 항상 ul 태그나 ol 태그로 감싸야 합니다.

이제 css로 스타일을 바꿔보겠습니다.

ul {
	list-style: none:
}

위의 코드로 리스트 왼쪽의 작은 원을 삭제할 수 있습니다.
브라우저가 기본으로 부여해준 스타일을 list-style: none; 코드로 스타일을 없앴습니다.

이제 선을 만들어야겠죠?

ul {
  list-style: none;
  border-left: 3px solid black;
}

border-left를 이용해 왼쪽에만 선을 만들었습니다.

그런데 리스트와 ul 태그 테두리 사이가 너무 머네요.
이것은 브라우저에서 ul 태그에 dafault로 margin, padding 등을 추가해놓았기 때문입니다.

ul {
  list-style: none;
  border-left: 3px solid black;
  padding: 0;
}

padding 값을 0으로 하니 아래와 같이 되었네요.

padding 값을 늘려야겠네요.

ul {
  list-style: none;
  border-left: 3px solid black;
  padding: 15px;
}


적절하게 여백이 생겼지만 ul 태그 상단, 하단에도 여백이 추가 되었습니다.
하단에만 여백을 줘야겠네요.

ul {
  list-style: none;
  border-left: 3px solid black;
  padding: 0 0 0 15px;
}

목록끼리 위아래로 너무 붙어있어서 li 태그에 padding-bottom 값으로 조금 띄워주겠습니다.

li {
  padding-bottom: 10px;
}

여기서 잠깐! 혹시 padding이 아니라 margin을 쓰면 안될까요?
padding-bottom 대신 margin-bottom 을 사용하여도 똑같은 결과가 나옵니다.
li 태그는 테두리를 갖고 있지 않습니다.

마지막 리스트인 "Search" 밑에 여백 때문에 세로줄이 넘쳤네요.
목록 아이템의 마지막 것만 padding-bottom을 제거하고 싶습니다.
위와 같은 selector 표기법으로 마지막 아이템의 padding-bottom을 제거할 수 있겠네요.

li:last-child {
   padding-bottom: 0;
}


이렇게 해서 list와 관련된 태그와 css를 배워보았습니다!

profile
성민규
끈기있고 꾸준하게!!
이전 포스트

2022.05.09 DAY 1 - HTML & CSS

다음 포스트

2022.05.11 DAY 3 - HTML & CSS

0개의 댓글