img : 이미지 삽입 태그 <img src="https://~~~"> * img는 닫는 태그가 필요하지 않다.
a태그 : 링크 삽입 <a href="https://~~~">
ul, ol, li : 리스트를 정리해주는 태그
태그 중첩 생성을 하고싶다면
div > ul > li
input, textarea :
- input은 텍스트나 체크박스 등을 만들 수 있다. input 타입 중 radio와 checkbox의 차이점은 radio는 이 중에서 하나를 선택하는 것이라고 볼 수 있으며, name을 통해 그룹을 지정해준다. checkbox는 여러개를 선택할 수 있다는 특징이 있다.
- textarea는 줄바꿈이 되는 입력폼을 생성해준다.
section : 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는 데 사용된다.
hr : 수평선을 그어주는 태그
br : 단락 중간에 줄 바꿈을 해주는 태그
pre : 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타나게 해주는 태그
strong : 중요성, 긴급성, 심각성을 알리는 경우 그 부분을 강조하는 데 사용
em : 문장 내에서 특정 문맥의 강조할 때 사용
mark : 형광펜으로 칠한 것처럼 하이라이트 영역 태그
sub : 아래첨자를 넣고 싶을 때 사용하는 태그
sup : 윗첨자를 넣고 싶을 때 사용하는 태그
del : 텍스트 중간에 선을 그어 삭제 되었음을 의미하는 태그
q : 인용 내용을 표시하기 위해 사용할 수 있으며, 줄바꿈 없이 다른 내용과 함께 표시된다.
blockquote : q태그와 같이 인용 내용을 위해 표시하나 줄이 바뀌어 나타난다.
blockquote cite : 인용문의 출처를 표시한다.
bdo : 글자를 어느 쪽부터 써내려 갈 것인지 정하는 태그
<bdo dir="ltr|rtl"> LTR=왼쪽에서 오른쪽으로 RTL=오른쪽에서 왼쪽으로
abbr : 약자임을 나타내는 태그이다.
<abbr title="html is ...">html</abbr>
title 속성에 약자의 뜻을 넣으면, 마우스를 약자 위에 올렸을 때 그 뜻을 툴팁으로 나오게 한다.
<!-- 주석 내용 -->
웹페이지에 내용이 표시되지 않고, 소스로만 표시되어 주석 역할을 할 수 있다.
<ul>과 <ol>의 차이점 :
<ol>은 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용되고, <ul>은 순서가 필요 없는 목록을 만든다.
getElementById :
document.getElementById(id);
id를 통해 element 반환
일치하는 값이 없다면 null 반환
처리속도 빠름
리턴값 : HTMLCollection
HTMLCollection : name, id, index번호로 접근 가능
getElementById : id 값
querySelector :
document.querySelector(seletors);
seletor의 구체적인 그룹과 일치하는 document인 첫번쨰 엘리먼트 반환
일치하는 값이 없다면 null 반환
getElementById 비해 느림
리턴값 : NodeList
NodeList : index 번호로 접근 가능
querySelector : 첫번째 값 하나만 가져온다.
querySelectorAll : 모두 가져온다.
code : 컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할 때 유용하다.
samp : 컴퓨터 프로그램에서 샘플을 출력할 때
kbd : 키보드 입력을 지정할 때
var : 변수를 입력할 때 유용하다.
pre : 미리 작성된 텍스트를 있는 그대로 표시해주며, 블록 형태로 사용될 수 있다.
select : 아래로 펼쳐지는 목록 상자, 드록다운 메뉴 또는 리스트박스를 만들 수 있음
option : HTML select 태그 내부의 항목, HTML에서 드롭다운 메뉴의 항목
textarea : 텍스트를 입력하는 창을 만든다.
placeholder : 입력창에 반투명하게 text를 넣어준다.
disable : 해당 input 요소는 비활성화가 되며, 사용할 수도 클릭할 수도 없다. 조건을 주어 특정 조건일 때만 속성을 주면서 이용 가능
maxlength : 최대 입력 글자수를 제한할 수 있다.
readonly : 읽기만 가능할 뿐 값 변경은 불가능한 태그
text-decoration:none : 밑줄 없애는 태그
target="_blank" : 웹페이지에서 링크를 클릭할 때 새페이지로 열어주는 태그
<a href="default.html" title="Home">Back to Home</a>
default.html 링크에 마우스를 갖다대면 Home이라는 툴팁이 표시된다.
float : 사진, 그림을 어디에 정렬할건지 정하는 태그 "float:right"
<img alt="텍스트">
이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시해주는 태그
표 table
<th>내용</th> table head의 약자로, 표의 제목을 쓰는 역할이다. (기본값은 굵은 글씨체, 중앙 정렬)
<tr> 내용 </tr> table row의 약자로, 가로줄을 만드는 역할 (기본값은 보통 글씨체, 왼쪽 정렬)
<td> 내용 </td> table data의 약자로, 셀을 만드는 역할 (기본값은 보통 글씨체, 왼쪽 정렬)
caption 테이블의 제목을 표현하기 위한 태그
열 합치기
<td colspan="합칠 셀의 개수"> 내용 </td>
<th colspan="합칠 셀의 개수"> 내용 </th>
행 합치기
<td rowspan="합칠 셀의 개수"> 내용< /td>
<th rowspan="합칠 셀의 개수"> 내용< /th>
link 태그 안에서 href 속성을 통해 html과 css를 연결한다.
<link rel="stylesheet" href="index.css" />
=== id ===
html 기본 태그에만 css를 적용하면, 그 태그가 사용된 모든 태그들이 함께 디자인이 변경된다. 그렇기에 id값을 주어 명확하게 표시해주고,
#id값 {
적용할 속성}
을 통해 별도로 적용할 수 있다.
=== class ===
동일한 기능을 하는 CSS를 여러 요소에 적용하기 위해서 class를 사용한다.
.class명 {
적용할 속성
}
을 통해 적용할 수 있다.
<li class="클래스명1 클래스명2">리스트1</li>
를 통해 공백으로 구분하여 하나의 요소에 여러 class를 적용할 수도 있다. (리스트가 4개 있다고 칠 때, 리스트 1번만 따로 다른 속성을 부여하고 싶을 때 사용)
텍스트를 꾸밀 때 사용하는 속성
색상 변경 : color
글꼴 속성 : font-family
글자 크기 : font-size
굵기: font-weight
밑줄, 가로줄: text-decoration
자간: letter-spacing
행간: line-height
가로 정렬 : text-align
글꼴의 이름은 따옴표를 붙여 적용할 수 있다. 사용하려는 글꼴이 존재하지 않거나, 디바이스에 따라 지원하지 않을 수 있어 이런 경우를 대비하여 fallback 글꼴을 추가할 수 있다. fallback 글꼴은 ,쉼표로 구분하여 입력할 수 있으며, 입력 순서대로 적용된다.
글꼴 크기의 단위
글꼴의 단위는 절대 단위와 상대 단위, 두 가지로 구분할 수 있다.
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
(1) 기기나 브라우저 사이즈 등의 환경에 영향을 받지 않는 절대적인 크기로 정하는 경우 에는 px(픽셀)을 사용한다.
px은 글꼴의 크기를 고정하는 단위이기 때문에 작은 글씨를 보기 힘든 사용자가 브라우저의 기본 글꼴 크기를 더 크게 설정하더라도 크기가 고정된다. 개발자가 제목을 강조하기 위해 픽셀을 이용해 글꼴의 크기를 지정한다면, 사용자의 환경에 따라 일반 텍스트보다 작게 보이는 결과가 초래할 수도 있다.
픽셀은 모바일 기기처럼 작은화면이면서, 동시에 고해상도인 경우에도 적합하지 않다. 기본적으로 고해상도에서는 1px이 모니터의 한 점보다 크게 업스케일 되기 때문에, 뚜렷하지 못한 형태로 출력되는 경우가 있다. 따라서 픽셀은 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
(2) 일반적인 경우에는 상대 단위인 rem을 사용한다.
root의 글자 크기, 즉 브라우저의 기본 글자 크기가 1rem이며, 두 배로 크게 하고 싶다면 2rem, 작게 하려면 0.8rem 등으로 조절해서 사용할 수 있다. 이는 사용자가 설정한 기본 글꼴 크기를 따르므로, 접근성에 유리하다.
(3) 반응형 웹(responsive web)에서 기준점을 만들 때
반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 말한다. 예를 들어, 데스크탑에서 볼 때, 스마트폰에서 세로 모드로 볼 때, 가로 모드로 볼 때, 태블릿으로 볼 때 각각 다르기 때문에 디바이스 크기 별로 css를 달리 적용해야 한다. 이때에, 디바이스 크기를 나누는 기준을 보통 px로 정한다.
(4) 화면 너비나 높이에 따른 상대적인 크기가 중요한 경우에는 vw, vh를 사용한다.
웹사이트의 보이는 영역을 Viewport라고 하는데, vw, vh는 각각 viewport width와 viewport height을 뜻한다.
9. 모든 콘텐츠는 각자의 영역을 가지며, 일반적으로 하나의 콘텐츠로 묶이는 엘리먼트(요소)들이 하나의 박스가 된다.
줄바꿈이 되는 박스(block) vs. 옆으로 붙는 박스(inline, inline-block)
박스의 종류는 줄바꿈이 되는 박스와 줄바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄바꿈이 되는 block / 줄바꿈이 일어나지 않고, 크기 지정을 할 수 없는 inline / 이 두가지 박스 종류의 특징이 섞인, 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block
inline 태그는 width, height 속성이 적용되지 않는다. 그렇기에 크기 지정을 하고싶다면 diplay: inline-block; 속성을 주어 변경한다.
border (테두리)
margin (바깥 여백) : 각각의 값은 top, right, bottom, left로 시계방향입니다.
padding (안쪽 여백) : border를 기준으로 박스 내부의 여백을 지정합니다. 값의 순서에 따른 방향은 margin과 동일하게 top, right, bottom, left입니다.
박스를 벗어나는 콘텐츠 처리
p {
height: 40px;
overflow: auto;
}
이와같이 overflow 속성을 지정하면. 박스보다 큰 콘텐츠에는 스크롤을 표시한다.
overflow에 hidden값을 준다면, 박스를 벗어나는 컨텐츠는 보여주지 않는다.
또한 overflow-x 속성과 overflow-y 속성을 이용하여 x축, y축을 지정해 스크롤 방향도 지정할 수 있다.
박스의 크기를 디자인할 때에는 박스에 적용할 여백을 고려하여 디자인 해야한다. 그렇기에 모든 요소에
* {
box-sizing: border-box;
}
를 적용하면, 모든 박스에서 여백과 테두리를 포함한 크기로 계산된다.-태그 추가 예정-
개발 공부