TIL.39 HTML.CSS 알아보기(wecode_1일차)

TIL 2020. 11. 16. 17:57

728x90

HTML

HTML은 웹 페이지를 만들기 위한 언어입니다.
HTML로 웹페이지의 구조를 잡을 수 있습니다.
HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다.
브라우저(safari, chrome, ie..)는 HTML파일을 가지고 뭘 어떻게 그려주면 되는지 파악한 후에 웹 페이지를 생성합니다.

attribute(속성), element(요소)

아래에서 div, a, img는 태그이고 class, href, src, alt는 속성입니다.

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

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

<태그이름> 으로 시작하여 </태그이름> 으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 합니다.

끝 태그가 필요없는 것은 태그가 그 자체로 요소가 됩니다.

<h1>시작!</h1> <img src="me.png">

CSS

CSS란 HTML 태그들에 디자인을 입혀주는 것입니다.

HTML이 헤더, 문단, 테이블 등으로 정보를 조직화하는 구조를 제공한다면, CSS는 HTML이 아름다워 보이도록 스타일을 입히는 것입니다.

margin

순서대로 위, 오른쪽, 아래, 왼쪽의 여백 값입니다.

한 번 더 풀어쓰면 아래와 같습니다.

p.example { 
margin: 50px 50px 50px 50px;
}

p.example { 
margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px;
}

border

p { 
text-decoration: underline;
}

위의 p태그에 밑줄을 쳐주는 스타일입니다.

그런데 밑줄의 두께나 색깔 등, 완벽하게 커스터마이징 하기가 어렵습니다.

이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있습니다.

css 문법으로 볼 때는 밑줄이 아니라 아래쪽 테두리이지만

내가 원하는대로 디자인할 수 있으니 대부분의 개발자는 border-bottom로 구현하는 것을 선호합니다.

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

box-sizing

.new {
  box-sizing: border-box;
}

이와 같이 보이는대로 width 값을 주고,

그 후에 그 안 쪽으로 padding을 주는 것이 생각하기에 쉽습니다.

그래서 거의 대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용합니다.

또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일히 태그마다 적용하기에는 코드가 길어지겠죠.

아래와 같은 "*" selector로 모든 태그에 적용할 수 있습니다.

* {
  box-sizing: border-box;
}

앞으로 강의에서 box-sizing 프로퍼티를 딱히 넣지는 않고 진행하겠습니다.

하지만 개인 프로젝트나, 실무를 할 때는 꼭 적용해야하는 프로퍼티 입니다.

CSS selector

이번 수업은 selector표현과 우선순위에 대해 조금 더 깊게 배워보는 시간입니다.

.a div .b .pre span { 
background-color: yellow; 
}

span 태그에 적용되는 css입니다.

그런데 a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그에 적용이 됩니다.

<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

CSS selector 우선순위

inline styling(13줄에 style 요소로 직접): 1000점
id: 100점
class: 10점
tag: 1점

tag <<<<< class <<<< id <<<<<< inline css

학습 목표

1. 웹 페이지의 토대가 되는 HTML과 CSS의 역할에 대해 설명할 수 있다.

- HTML : .html 확장자가 붙은 텍스트파일로

웹사이트를 만드는 가장 기초가 되는 마크업 언어이며 웹페이지의 내용과 구조를 담당하는 언어로써 브라우저에게 정보를 어떤 형식으로 보여주어야 하는지를 전달해주는 역할을 한다.

- CSS :

CSS란 HTML 태그들에 디자인을 입혀주는 것입니다.

초창기에 웹은 HTML만으로도 만들기, 꾸미기를 하였습니다

그러나, 웹 사이트가 폭발적으로 커지면서 여러개의 공통적인 문서(HTML)를 1개의 디자인이 변경되면 모든 파일을 수정하여야 되는 문제가 발생하게 되었습니다

CSS는 이런 문제를 동시에 해결할 수도 있고, 웹 페이지 정보와 스타일을 분리하여 유지보수를 수월하게 할 수 있습니다

간단하게 설명한다면

HTML은 웹사이트에서 화면에 표시되는 정보

CSS는 웹 사이트에서 화면에 표시되는 정보들을 꾸며주는(디자인) 역할을 합니다.

2. HTML과 CSS의 기초 개념 및 용어를 설명할 수 있다.

2.1 HTML

- HTML에는 tag, attribut, element 및 Arguments(속성값) 등으로 구성되어 있다

- tag : HTML 문서를 구성하는 명령어로 tag의 역할은 해당 영역이 어떤 역할을 해야하는지 웹 브라우저에게 알려주는 역할을 하게 된다.- tag는 보통 단독 사용형 : img, hr, br 등 (시작함과 동시에 끝나는 태그) 와 시작-끝을 지정해주는 영역 지정형 : html, body, div..등 으로 분류된다.

- 속성 : 시작 태그 안에 들어가며 해당 요소의 성격 및 스타일을 나타내는 상태구분값이라 할 수 있다.

- 속성값 : 속성에 대한 값.

2.2 CSS

- CSS 는 HTML을 꾸며주는 기능을 수행하며 디스플레이 속성 , 클래스, 수많은 꾸미기 명령어 등이 있다.

3. HTML에서 자주 사용되는 태그의 종류를 알고 적절하게 활용할 수 있다.

HTML은 기본적으로 <HTML>, <head>, <body> 태그로 기본 틀을 가지고 있으며

주로, 제목 태그(h1) // 줄바꿈태그(br, p) // 이미지태그(Img) // 하이퍼링크(a) // Division(div)를 사용한다.

<제목 태그>

h1 ~ h6 태그까지 있으며, 줄바꿈이 자동 적용된다.

h1은 페이지당 한번만 사용하며 시각적 효과가 아닌 정보의 구조를 나타내는 용도로 사용한다.

<줄바꿈태그>

단독사용형으로 닫는 태그가 필요없다.

<br> : 단순 시각적 줄바꿈이 필요할때 사용한다

<p> : paragarph의 약자로 단순 줄바꿈이 아닌 문단 구분을 위한 태그로 CSS가 적용될 단위로 많이 사용된다.

<이미지태그>

말그래도 이미지를 사용할때 사용하는 태그이다.

이미지태그는 사용시 거의 속성과 함께 사용된다. 이때 속성은 앞쪽 태그에 들어가게된다.

• alt 속성 : 정보 용도

스크린 리더가 읽어주는 값
네트워크 오류, 컨텐츠 차단 죽은 링크 등의 상황 대처

width는 CSS로 대체 가능

<하이퍼링크>

원하는 부분에 클릭을 구현하여 웹페이지나 특정 프로그램으로 연결해주는 역할을 하는 태그이다.

<a> : anchor

<a href= “~~”>Text</a> -> 현재 페이지에서 링크로 이동
<a href=“~~” target=“_black>Text</a> -> 링크 새페이지 실행

<div 태그>

Division의 약자로 레이아웃을 나누는데 주로 사용하며 자동 줄바꿈이 된다.

다른 태그들과는 다르게 기능을 가지고 있지 않으며 주로 CSS와 연동하기 위해 쓰인다.

4. Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다.

Semantic Web 이란?

1. 등장배경

웹 기술이 발전하면서, 인터넷이 실생활까지 확산되는 기폭제 역할을 하였다.
이로인해 수많은 정보들이 축적되었는데, 무분별한 정보의 축적은 오히려 많은 문제들을 불러왔다.
컴퓨터가 스스로 정보를 해석, 가공할 수 없어 모든 정보를 사용자가 직접 개입해서 처리해야 되는 것이었다.
기계가 읽고 처리할 수 있는 웹을 개발하고자 탄생한 것이 Semantic Web이다.

4.2 구성요소

RDF(resouce Description Framework): 웹상의 메타데이터의 표현과 교환을 위한 프레임워크
XML(eXtensible Markup Language): 태그 등을 이용하여 데이터의 구조를 기술하는 언어의 한 가지, 대표적인 것이 HTML 이다.
Ontology: 특정 지식과 관련된 용어 사이의 관계 정의
Agent: 사용자의 역활을 대행하여 지능적, 자율적 임무수행.

2. Semantic Tag

semantic Web을 사전적 의미로 풀어본다면, 의미론적인 웹 이다.

과거 무분별한 태그의 사용으로 인해 정보를 찾기 위해 사람이 직접 개입해야 하는 비효율적인 시스템을 개선하고자, 의미있는 태그들을 개발하기 시작했다.

1. non-semantic Tag 와 semantic Tag 비교

div, span 등 이들 태그는 content에 대한 어떤 설명도 없다.
form, table, img 등 content의 의미를 명확하게 설명하고 있는것을 볼 수 있다.

2. Semantic Tag의 계속적인 발전 "HTML5"

article, aside, footer, header, main, nav, section 등 부분의 성격에 따라 쓰는 태그들이 등장한다.

3. 효과적인 검색가능

의미 있는 Tag들이 등장 함으로 인해 기계는 정보들을 효과적으로 받아 들일 수 있게 된다.
사람이 원하는 정보를 'Tag'의 의미를 통해 더욱 정확하게 정보를 제공할 수 있게 된 것이다.

3. Semantic Tag 사용의 사례

1. img vs div backgroung-image

먼저 두 태그를 간단하게 비교하자면 img태그를 사용시 alt속성에 문자열을 넣을 수 있다.
alt속성에 작성된 문자열은 meta정보가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 된다.
div background-image의 경우 단순한 이미지 첨부일 뿐, 어떠한 정보도 담지 않는다.

사용자는 검색을 통해 정보를 가져간다.

내 이미지가 사용자의 검색에 노출되어야 한다면, img 태그를 사용하는 것이 좋다.

사이트를 꾸미기 위한 장식

이미지의 활용이 순수 사이트의 장식을 위해서라면, background-image를 사용하는 것이 좋다.

semantic web : 무분별한 태그 사용으로 인해 사용자가 직접 개입해야하는 불편을 해결 위한 기계가 읽고 처리할 수 있는 웹으로 만들기위해 탄성한것이 semantic web 이다.

CSS 기본 개념을 활용하여 페이지의 레이아웃을 구성하며 요소에 스타일을 입힐 수 있다.

728x90

저작자표시 동일조건

'TIL' 카테고리의 다른 글

TIL.40 CSS 알아보기_2(wecode_3일차) (0)	2020.11.18
TIL.40 CSS 알아보기(wecode_2일차) (0)	2020.11.17
TIL.38 예외 발생시키기 및 만들기 (0)	2020.11.15
TIL.37 예외처리하기(try, except) (0)	2020.11.14
TIL.36 selenium을 이용한 이미지 크롤링 자동화 (2)	2020.11.13

ABOUT ME

muntari Log muntari Log

HTML

attribute(속성), element(요소)

CSS

학습 목표

1. 웹 페이지의 토대가 되는 HTML과 CSS의 역할에 대해 설명할 수 있다.

2. HTML과 CSS의 기초 개념 및 용어를 설명할 수 있다.

3. HTML에서 자주 사용되는 태그의 종류를 알고 적절하게 활용할 수 있다.

4. Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다.

'TIL' 카테고리의 다른 글

티스토리툴바

ABOUT ME

HTML

attribute(속성), element(요소)

CSS

학습 목표

1. 웹 페이지의 토대가 되는 HTML과 CSS의 역할에 대해 설명할 수 있다.

2. HTML과 CSS의 기초 개념 및 용어를 설명할 수 있다.

3. HTML에서 자주 사용되는 태그의 종류를 알고 적절하게 활용할 수 있다.

4. Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다.

'TIL' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바