HTML, CSS #1

1. 태그를 이용해서 막대 만들기

html

<div></div>
<section></section>
<article></article>

css

div {
  height:100px;
  background-color:red;
}

section {
  height:100px;
  background-color:green;
}

article {
  height:100px;
  background-color:blue;
}

• div, section, article 태그들을 만들고 css로 태그들을 꾸며주는 형태야. 그러면 위 이미지 처럼 나오는데 확실히 직관적이라 이해하기 편하지?

2. 테이블 만들기

<table border="1">
  <tr>
    <th>교시/요일</th>
    <th>월</th>
    <th>화</th>
    <th>수</th>
  </tr>
  <tr>
    <th>1교시</th>
    <td>국어</td>
    <td>수학</td>
    <td>일본어</td>
  </tr>
  <tr>
    <th>2교시</th>
    <td>영어</td>
    <td>국사</td>
    <td>음악</td>
  </tr>
</table>

• 이번에는 html로 테이블을 만들어 봤어. 태그를 정리하자면,
• tr:행, td:행의 내용, th: 행, 열의 제목 이고 table태그로 감싸주면 끝!

3. a 태그, 후손선택자와 자식선택자

<div><a href="http://www.naver.com">네이버</a></div>
<nav><a href="http://www.google.com">구글</a></nav>
<section><a href="http://www.daum.net">다음</a></section>

• 먼저 div태그안에 또 a태그가 있고 그 안에 url이랑 네이버 , 구글 , 다음 이렇게 적혀있는거 보이니??

• 이건 div태그 안에 a라는 태그에 url을 받아와서 네이버라는 이름을 적어주고 클릭을 하면 연결된 url로 이동시키는 태그야.

• 또 nav,section도 있는데 div와 같은 역할 이라고 보면 돼.

div a {
  font-size:3rem;
  color:black;
}

nav a {
  font-size:5rem;
  color:red;
}

section a {
  font-size:7rem;
  color:blue;
}

• 그래서 div a , nav a, section a 이렇게 있잖아! 이게 div>a 즉 div안에 있는 a 라고 표현 할 수 있어.

• 그럼 div, nav, section마다 갖고 있는 a가 다르니까 출력도 다르게 되겠지??
  이렇게 출력 되는걸 볼 수 있어.