TIL_09_with Wecode 001 html & css

JIEUN·2021년 2월 15일
0
post-thumbnail

위코드 첫 날, html 과 css 과제를 하던 중, 기록하고 싶은 내용들이 있어 남긴다.

  • <meta charset="utf-8">: 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 합니다. //그냥 쓰길래 따라 썼었는데 한글이 포함된 페이지에는 추가를 해줘야 하는 거였다. 한글만 쓰면 왜 오류가 나지 영문도 모른 채 지나갔었는ㄷㅔ..

  • <meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다. //아 왠지 저번 웹사이트 만들었을 때 웹페이지가 축소가 되더라니..

  • <h1>, <h2>, <h3>, <h4>, <h5>
    1에서 5로 숫자가 올라갈 수록, 글씨 크기가 점점 작아집니다. heading의 줄임말입니다.

  • <span>
    <span>태그에는 주로 텍스트를 넣어줍니다.
    개행(line break)이 되지 않고, 한 줄에 이어서 나오게 됩니다.
    <span>과 같이 한 줄에 이어서 나오는 요소를 **inline-element** 라고 합니다.

  • <p>
    <p>태그 또한 텍스트를 주로 넣어줍니다.
    p는 paragraph 의 줄임말인 만큼, 주로 문단을 통으로 넣을 때가 많습니다.
    <p>태그는 <span>태그와 달리 줄바꿈이 일어납니다.

  • div를 사용하는 이유는,
    비슷한 부분끼리 그룹지어주고,
    디자인에 맞게 레이아웃을 분리해주고,
    <div>에 class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있기 때문입니다.
    예를 들어 헤더, 메뉴, 주요 내용, 푸터.. 이렇게 나누어 div로 묶어 줍니다.

<a href="https://wecode.com">위코드로 이동</a>

-a는 tag 이름이고
-href는 attribute(속성) 이름이며
-https://wecode.com 은 href 속성에 대한 attribute 값이고
-"위코드로 이동" 은 content(내용)입니다.

id 와 class 의 차이를 기억하고 싶어서.

  • id
    id는 각 태그에 이름을 주는 속성입니다.
    즉, 중복된 id 이름이 있으면 안된다는 말입니다.
    예를 들어 profile이라는 id를 가진 태그는 단 하나만 있을 수 있습니다.
    다른 태그에 profile이라는 id는 더이상 사용할 수 없습니다.

  • class
    class도 태그에 이름을 주는 속성입니다.
    id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있습니다.
    예를 들어 '이철수'라는 이름을 가진 사람이 여러 명 이듯이
    여러 tag에 중복된 class 이름을 줄 수 있습니다.

  • 브라우저에서는 가장 먼저 태그를 확인하고 그에 맞게 기본(default) 스타일을 적용합니다.
    하지만 해당 태그나 class, id에 css 값이 있다면 해당 스타일을 더 우선순위로 적용하게 됩니다.
    예를 들어, 원래라면 h1 태그가 h4 보다 커야하지만, 태그에 css 값이 있다면 해당 스타일을 우선적으로 적용하게 됩니다.
  • text-align
    모든 요소의 기본 정렬은 왼쪽 정렬입니다.
    span에는 오른쪽 정렬이 되도록 클래스를 부여하였는데도 오른쪽 정렬이 되지 않았습니다.
    span은 inline-element이기 때문에, span이 차지하는 영역은 "span의 오른쪽 정렬" 만큼의 길이밖에 안 되기 때문입니다.

    그림에서 노란색은 해당 요소가 차지하는 영역입니다. 이 영역안에서 정렬을 하게 됩니다.

  • text-indent: 50px; 들여쓰는 css 태그
    참고하기.
    blockquote 이란 태그는 인용문그를 넣을 때 쓰는 태그입니다.
    브라우저에서 blockquote태그에 양쪽 여백을 넣는 기본 스타일을 자동으로 적용하였습니다.
    참고하기.
    그럼 문장 사이사이에 스페이스를 추가하고 싶을 때는 어떻게 하나요?
    스페이스를 여러 번 친다고 해도 하나의 스페이스만 적용되기 때문에 여러 번의 스페이스를 적용하기 위해서는 스페이스를 의미하는 코드를 넣어주어야 합니다.
    &nbsp; 가 스페이스를 의미하는 코드입니다.


  • margin
    주황색은 margin 영역, 위, 오른쪽, 아래, 왼쪽에 모두 50px
    노란색은 border 영역, 보더의 두께는 5px이다.
    초록색은 padding 영역, 위, 오른쪽, 아래, 왼쪽에 모두 50px
    요소의 가로는 273px, 세로는 90px
    요소에 border 스타일을 주면 테두리가 그려집니다.
    padding은 border 내에 생기는 영역입니다.
    그리고 위의 그림에서 273px이라는 가로 값은 padding영역이 합쳐진 가로 길이입니다.
    margin은 border 외부에 생기는 여백입니다.
    사진처럼 margin까지(주황색) 합쳐진 가로길이는 총 373px입니다.
    273 + 50(왼쪽margin) + 50(오른margin) = 373
    순수 내용(파란색영역)은 padding과 border를 제외한 길이인데 계산해보면 163px입니다.
    273 - 50(왼쪽패딩) - 50(오른쪽패딩) - 5(왼쪽테두리) - 5(오른쪽테두리) = 163

    width: 273px;
    height: 90px;
    margin: 50px;
    border: 5px solid black;
    padding: 50px;

  • span {
      border-bottom: 3px solid black;
      padding: 5px;
    } ```

밑줄 처럼 보이나요?
text-decoration: underline;은 마음대로 customizing하기 어렵기 때문 웹 사이트에서 대부분의 밑줄 스타일은 이렇게 border 을 이용하여 구현한답니다.

 * {
  box-sizing: border-box;
}

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하는 크기를 찾기가 어렵습니다. box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽습니다.

div .container li.first-list
<li>태그인데 "first-list" 클래스인 요소에 css를 적용한다.
그런데 <div>태그 내부의, "container"클래스 내부에 있는 요소에만 적용한다 는 뜻입니다.
tag <<<<< class <<<< id <<<<<< inline css

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

나의 답변:
두 가지 방법의 차이점을 설명하기에 앞서,

시맨틱 웹(Semantic Web)이란, 웹페이지들을 구성하고 있는 요소들의 의미나 관계등을 파악하고 구축하여 '데이터베이스화' 하고자 하는 것입니다.

시맨틱 태그(Semantic Tag)란, 시맨틱 웹을 좀 더 용이하게 하기위해 생겨난 form, section, nav, aside, footer, table 등과 같은 의미를 갖고있는 태그들 입니다.
의미를 갖지않는 div, span은 non-시맨틱 태그에 속합니다.

<img>태그는 '이것은 이미지다!' 라는 것을 분명하게 알려주는, 의미를 갖고있는 시맨틱 태그 중의 하나로, 검색 엔진에서 웹페이지를 검색할 경우에 src 또는 alt 의 정보를 배경으로 하여 보다 정확한 검색을 할 수 있게 도와주며, 웹사이트에 노출을 시킴으로써 긍정적인 효과도 기대할 수 있습니다.

반면에 <div> 태그에 background-image 속성을 추가하여 이미지를 삽입하게 되면, 앞서 말씀드린 것처럼 <div> 태그는 의미를 갖지않는 논 시맨틱 태그로, 사이트 컨텐츠에 대한 의미나 부가적인 설명을 가지지 않습니다. 그래서 보통은 반복적으로 사용되는 작은 아이콘이나, 단순히 디자인적인 측면으로 사용되는 이미지들을 삽입할 때 쓰입니다.

0개의 댓글