2일차에는 html의 table태그, Semantic태그, css에 대해 간단하게 알아보는 시간을 가졌다.
table태그
table태그는 '표' 를 만들때 사용하는 html 태그이다.
과거에는 테이블을 사용하여 레이아웃을 구성하였으나, 기능상의 한계로 인하여 최근에는 공간 분할 태그인 div태그를 많이 사용하는 추세이다.
table 태그의 요소로는 아래와 같은 요소가있다.
<table></table>
<tr></tr>
<th></th>
<td></td>table : 테이블을 선언 하는 태그다.
tr : table row의 약자로써 표 내부의 행을 의미한다.
th : table head의 약자로써 표 내부의 제목을 의미한다.
td : table data의 약자로써 행 내부의 일반 칸을 의미한다.
table태그의 속성
속성에는 아래와 같은 속성이 있다.
border : 테두리의 두께
cellspacing : 테두리 간격 사이의 너비
cellpadding : 셀 내부의 간격
align : 테이블 정렬 속성
width, height : 테이블의 너비와 높이
bgcolor, bordercolor : 테이블 배경색과 테두리 색
td의 속성
colspan : 해당 칸이 점유하는 열의 수 지정
rowspan : 해당 칸이 점유하는 행의 수 지정
Semantic태그란?
이전에 공부를 해왔음에도 불구하고 시맨틱 태그가 무엇인가요? 라는 질문에 시원하게 대답을 못했다.
이번에 시맨틱 태그에 대해서 자세히 알아보아야겠다.
Semantic 이란 '의미의', '의미론적인' 이라는 뜻을 가진 형용사다.
즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이며,
간단하게 div태그에 의미를 부여한 태그라고 생각하면 편할 것 같다.
시맨틱 태그는 html5에 처음으로 등장한 태그이며
header, footer 등등 태그들만 보고서 이 태그의 의미와 기능을 알 수 있도록 표현하는 것이 시맨틱 태그라고 생각한다.
예전에 나는 'div만 써도 웹 다 만들 수 있는데?' 라고 생각했다.
하지만 개발의 특성상 누군가와 협업을 할 일이 없을 수가 없다.
그렇기 때문에 코드의 가독성을 높이기 위해서는 시맨틱 태그는 선택이 아닌 필수요소라고 생각이 된다.
div를 header나 footer로 바꾸는게 어렵지는 않으니까.
결론적으로 시맨틱태그는..
웹 페이지를 이루는 요소에 의미와 맞는 태그를 사용하자.
Semantic 태그를 이용한 레이아웃 구성
CSS
css란 웹 페이지를 디자인 하기 위해 사용하는 언어이다.
가장 많이 사용하는 웹페이지인 네이버를 들어가보자.
네이버의 메인화면이다.
이 메인화면의 레이아웃을 비롯한 많은 것이 css가 없다면 어떻게 되는지 확인해보자.
방법은, 개발자 도구를 켜고 소스코드에서 css파일을 지우거나
메인 html 파일에서 link 태그의 stylesheet를 지워주면된다.
이것이 css파일이 지워진 네이버 메인화면이다.
가독성이 너무떨어지고 사용하고 싶지 않아진 모습이다.
css는 사용자에게 보기편한 UI를 지원하는 가장 좋은 방법중 하나인 것 같다.
CSS 적용법
css를 적용하는 방법은 크게 총 3가지로 나누어진다.
inline 방식
내장 style 방식
링크 방식 (module)
inline 방식
inline 방식은 태그안에 style속성을 추가하여 작성한다.
각태그마다 style을 지정해주어야하며 10개의 태그에 style을 주고싶을시 10개에 모두 각자 작성해야되는 불편함을 감수해야한다.
코드의 재사용이 불가능하다.
<div style="color:red;"></div>내장 style
내장 style은 html 파일안에 head태그안에 style태그를 삽입시켜 안에 css코드를 작성하는 방법으로, 태그에 같은 스타일을 적용가능하다. 하지만 1번 html파일에 지정된 css는 2번 html에 지정할 수 없는 불편함이 있다. 지역적으로 운용되는 css라고 생각하면 편할 것 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/practice.css">
<style>
h3{
background-color: black;
color: white;
}
</style>
</head>
<body>
<h3>h3</h3>
</body>
</html>링크 방식
모든 style을 하나의 css파일에 넣고 필요한 html 파일에서 해당 css파일을 링크해서 사용하는 방식으로 재사용성이 높은 것이 장점이다.
대부분 링크방식을 사용해서 만든다.
<link rel="stylesheet" href="./css/main.css"/>@import 방식
import방식은 css안에 css파일을 링크거는 방법이다.
css문서안에 또 다른 css 파일을 가져오는 방법.
css 참조 방식
인라인 > 내장방식 ? 링크
기본적으로는 가장 늦게쓰여진 css속성이 우선으로 적용된다.
마무리
css 적용의 우선순위에 대해서 모호한 부분이 있었는데 이번 수업을 통해 우선순위가 헷갈릴 걱정은 없을 것 같다. 부족한 css 정보를 더 공부해 나가야 겠다.👍
