-
HTML과 CSS웹 프로그래밍/FE(Front-End) 2021. 5. 27. 18:57
먼저, 웹 페이지의 설계에 기본적으로 사요되는 HTML에 대해 배웠다.
HTML은 HyperText Markup Language의 약어로 웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다. 각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용됩니다.
HTML은 여러 태그들로 이루어져 있다.
태그들은 각각의 의미를 가지고 있어 semantic하다고 표현하기도 한다.
태그를 통해 하이퍼링크를 걸어주거나 제목을 쓰거나 혹은 보여주고 싶은 이미지나 글들을 보여줄 수 있다.
(HTML 태그의 종류는 https://www.w3schools.com/TAGS/default.ASP 에서 확인할 수 있다.)
HTML 태그를 직접 써보면서 어떻게 웹 페이지에 나타나는지 확인해보자.
VScode나 다른 통합 IDE를 사용한다면 그 IDE를 통해 실습을 진행해도 되지만 강의에서 알려준 jsbin이라는 온라인 IDE환경을 사용해서 실습하는 것도 좋은 것 같다.
www.jsbin.com 실습 환경 이렇게 왼쪽에 코드를 작성하면 오른쪽에 웹 페이지에서 어떻게 나오는지 보여준다.
HTML태그는 <태그이름>내용</태그이름>이 기본형식이고 계층적인 형태(body태그 아래 h1)를 보인다.
각각의 태그의 의미를 reference문서를 참고해서 익히고 내가 원하는 것을 웹 페이지에 보여줄 수 있도록 연습할 시간이 필요하다고 느꼈다.
HTML 태그에는 웹 페이지의 레이아웃을 정하는 것도 존재한다.
레이아웃은 해당 HTML태그 안에 적은 정보들을 화면에서 어느 위치에 보여줄지를 결정해준다.HTML레이아웃 태그의 종류와 해당 위치는 다음과 같다.
출처https://www.boostcourse.org/web316/lecture/19355?isDesc=false 보통은 PC버전 웹 페이지를 제작할 경우에는 레이아웃 태그를 사용하기 보다는 div태그를 사용해서 class를 지정해주는 방식을 사용한다고 한다.
HTML 태그를 쓸 때에는 id와 class라는 속성을 줄 수 있다.
<div id = "oo"></div>처럼 id를 줄 수 있고 <div class="pp"></div>처럼 class를 줄 수 있다.
그러면 이러한 id와 class는 무엇일까?
먼저 id는 그 html태그만의 고유한 속성으로 한 html 문서에 하나만 사용가능하다.
고유한 id값이 주어지면 각각의 id를 가지고 있는 태그에게 특별한 제어를 할 수 있고 어떠한 태그 부분을 찾고 싶을 때 검색에도 용이하다.
한 웹 페이지에는 같은 태그들이 여러 개 존재할 수 있어서 내가 찾고자 하는 부분을 찾을 때 몇 번재 태그 부분이라고 명시해서 찾을 수 있지만 각각의 태그에게 고유한 이름의 id값을 주면 id값을 검색하면 바로 찾을 수 있기 때문에 id속성을 사용한다.
class는 id와 달리 하나의 html문서 안에서 중복해서 사용 가능한 속성으로 하나의 태그에 여러 개의 class를 공백을 기준으로 하여 지정할 수도 있다.
class속성을 사용하게 되면 같은 class속성을 가진 태그부분에 동일한 CSS스타일을 부여할 수 있게 된다.
다음으로 배운 것은 CSS이다.
CSS는 Cascading Style Sheets의 약어로 마크업 언어(HTML과 같이 태그를 이용하는 언어)가 실제 표시되는 방법을 기술하는 언어로 마크업 언어가 웹 페이지의 몸체를 담당한다면 CSS는 꾸미는 역할을 담당한다고 할 수 있다.
CSS의 구성을 보면 아래와 같다.
HTML에 스타일을 적용하는 방법은 3가지가 있다.
먼저, inline방법으로 HTML 자체에서 태그 안에 스타일을 지정하는 것이다.
inline으로 스타일을 지정하면 다른 방법으로 지정한 것보다 먼저 적용되는 우선순위를 가진다.
inline방법은 스타일과 구조가 섞여있어 유지보수하기 어렵다는 단점이 있다.
<span style="color:blue;"> 안녕하세요 </span>다음으로 internal방법으로 HTML에서 head태그의 내용에 스타일을 선언하는 것이다.
internal방법의 장점은 CSS파일을 따로 관리하지 않아도 되고 클라이언트가 CSS파일을 별도로 요청하지 않아도 된다는 것이다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> sapn { color: blue; } </style> </head>마지막으로 external방법으로 HTML파일과 별도로 CSS파일을 만들어 HTML에 링크태그로 파일경로를 지정하여 포함시키는 것이다.
3가지 방법의 우선순위는 inline으로 지정한 것이 가장 높지만 internal과 external은 우선순위가 동등하다.
만약 겹치는 선언이 있을 경우에는 나중에 선언된 스타일을 따른다.
특정 요소에 스타일을 적용하기 위해서는 적용할 요소를 찾아서 지정하는 것이 필요하다.
이러한 요소를 빠르게 찾을 수 있는 것이 CSS Selector이다.
CSS selector는 HTML의 요소를 tag, id, html 태그 속성 등을 통해 찾는 것이다.
스타일을 해당 요소에 지정하기 위한 기본 선택자는 3가지가 있다.
먼저, tag로 지정하는 것이다.
스타일을 넣고 싶은 tag의 이름을 선언하여 원하는 스타일을 넣으면 된다.
아래의 코드를 보면 span이라는 태그에 글자의 색깔을 파랑색으로 지정하는 것이다.
<style> span{ color: blue; } </style>다음으로 id로 지정하는 것이다.
id로 지정하여 스타일을 넣어주면 해당 id값을 가진 요소만 스타일이 적용되게 된다.
아래의 코드를 보면 id가 style1이라는 요소를 찾아 그 요소만 글자의 색깔이 파랑색으로 지정된다.
<style> #style1 { color: blue; } </style>마지막으로 class로 지정하는 것이다.
코드를 보면 아래와 같다.
<style> .style1 { color: blue; } </style>id로 지정하는 것은 #id값으로 쓰지만 class로 지정할 때에는 .class명을 통해 지정한다.
해당 class속성을 가진 요소만 스타일이 지정된다.
'웹 프로그래밍 > FE(Front-End)' 카테고리의 다른 글
AJAX 파헤치기 (add. 동기/비동기) (0) 2021.06.21 DOM Node 조작해보기(DOM API) (0) 2021.06.19 [JS] Spread Operator 알아보기 (0) 2021.06.16 jQuery를 쓰지않고 DOM 노드 이동시키기 (0) 2021.06.15 JS(JavaScript)와 Web UI 개발 (0) 2021.06.02