Semantic Web과 Semantic Tag
시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.
HTML 요소는 non-semantic 요소, semantic 요소로 구분 할 수 있다.
non-semantic: div, span 같이 content에 대하여 어떤 설명도 하지 않는 것
semantic: form, table, img 같이 content의 의미를 명확히 설명한다.
HTML5에 새롭게 추가된 semantic tag
Repl.it 복습
List
<ul>
<li>List</li>
<li>Set</li>
<li>HashMap (Dictionary)</li>
<li>Queue</li>
<li>Stack</li>
<li>Tree</li>
<li>Sorting</li>
<li>Search</li>
</ul>
ul {
list-style: none;
border-left: 3px solid black;
padding: 0 0 0 15px;
}를 통해 보더라인과 작은 원을 없앨 수 있다.
또한
와 같은 selector를 통해 홀수,짝수 또는 첫번째 마지막 list를 수정 할 수 있다.
CSS Selector
HTML
<div class = "container">
<header>
<p class = "title">나는 제목</p>
</header>
CSS
.container header p.title {
font-size: 50px;
}.container 이라는 class를 만들고, header 테그 안에 title이라는 p class를 html에 추가함으로써 .container header p.title 의 css 코드를 적용 시킬 수 있었다.
문구 스타일
텍스트 정렬
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}텍스트를 왼쪽, 가운데 , 오른쪽 정렬을 할 때 property 이름을 text-align으로 쓰고 값을 left, center, right을 적어서 정렬 할 수 있다.
indent
.js-description {
text-indent: 50px;
}
와
스페이스 역할을 하는 를 통해 들여쓰기 기능을 사용할 수 있다.Table
위와 같은 결과를 아래 table를 활용하여 구현해보았다.
<table class="border-table">
<tr> table row의 줄임말로 한행을 시작할때 쓰인다.
<th></th>table heading의 줄임말로 가운데로 정렬과 동시에 글씨 두께를 변경한다.
<th>1pm</th>
<th>2pm</th>
<th>3pm</th>
</tr>
<tr>
<th>Gym</th>
<td>Dodge ball</td> table data의 줄임말
<td>Kick boxing</td>
<td>Sack racing</td>
</tr>
<tr>
<th>Exercise Room</th>
<td>Spinning</td>
<td colspan="2" style = "background-color:gray">Yoga marathon</td>
</tr> colspan을 통해
<tr>
<th>Pool</th>
<td colspan="3" style = "background-color:gray">Water polo</td>
</tr>
</table>
##<td>나 <th>태그에 colspan, rowspan이라는 attribute를 추가해서 구현할 수 있습니다.Input
<input type="text" placeholder="ID">
<input type="password" placeholder="비밀번호">
<input type="number" placeholder="학번">
<textarea>소개:</textarea>-
type="text"
text를 입력하는 속성입니다.
대부분의 input type은 text 입니다.
어느 텍스트나 입력할 수 있습니다.
이름, id, 주소, 닉네임 등을 입력 받을 때 사용합니다. -
type="password"
text와 비슷한 속성인데, 뭔가를 입력하면 까만 원으로 나옵니다.
만약 화면을 공유하고 있다면, 남이 보지 않도록 처리한 것입니다.
화면에서는 안 보여도 JavaScript 쪽에서 무슨 값을 입력했는지 가져올 수 있습니다. -
type="number"
숫자만 입력할 수 있습니다.
만약 type="number" 으로 핸드폰 번호를 받으려면 "-"는 입력할 수 없습니다. -
placeholder
placeholder는 도움말을 넣어주는 부분입니다.
실제 input에 입력되어있는 텍스트가 아닙니다.
5.textarea
textarea는 input보다는 더 긴 텍스트를 입력받고 싶을 때 사용합니다.
보통 짧은 방명록이나 댓글을 입력할 때 textarea 태그를 사용합니다.
button:hover {
cursor: pointer;
opacity: 0.8
}를 통해 마우스를 올렸을때의 동작을 바꿀수 있다.
