Tag

miin·2021년 6월 16일

HTML / CSS

목록 보기

8/28

태그 기술법
<시작 태그 속성 = "값"> 내용 </종료 태그>

HTML문서의 배경색 지정 < body backgroundcolor = 색상코드>
HTML문서의 글자색 지정 < body text = 색상코드>

정확한 색을 위해서는 16진수로 입력

bgcolor: 배경색
background: 배경 색
text: 본문 글자 색
leftmargin: 왼쪽여백
rightmargin: 오른쪽 여백
margin: 문서의 여백 지정
text: 글자의 색 지정
link:링크로 설정한 글자의 색 지정
alink: 링크를 클릭했을때 변화되는 색 지정
vlink: 방문한 적이 있는 링크일때 색 지정

< meta /> ( self closing tag)
< meta(부가적인정보) name ="", content = ""
< meta charset="utf-8"(특수문자,한글 등 웹에서 깨져보이지 않게 해주는것 무조건 넣을것) />
og:~~ 카카오톡으로 링크가 보여질때 사용

< h1~6> title (숫자가 클수록 글씨가 작아짐)
< ul> < /ul> unordered list (그룹핑을 하기 위한 부모태그로도 쓰임, 반드시 자식태그를 갖고 있음)
( disc, circle, square 설정할 수 있음 ul type 검색 < ul type ="square"> < li> 내용 < /li> < /ul>)

ul li를 사용하여 박스를 만들때
li에 float: right를 주면 거꾸로 뒤집힌다 그래서 원래대로 오른쪽 정렬을 하려면,
ul(부모) float: right li(자식) float: lift

< li> < /li> dot list item (li태그는 반드시 부모태그를 가지고 있음)
< ol> < li> < /li> < /ol> 1,2,3 순서 list (ordered list)
< ol type=1,A,a,i,I start=1,A,a,i,I>(자동으로 숫자가 넘버링 될 수 있게 만들어줌)
< dt> < /dt> < dd> < /dd> 정의형 list
alt : 서버에 이상이 생겼거나, 이미지가 손상되었을때 어떤 이미지인지 알수있게 해줌
< p > < /p > 단락, 구분 / 한줄 띌 때도 사용가능 -> < p> ddd < /p> ddd < /p>
< b >< /b > 볼트체(두꺼운 글씨)
< br> 줄바꿈
& nbsp; 공백/ 연속된 공백이나, 줄바꿈은 하나의 공백으로 처리
< u> < /u> 밑줄
< align = center> 가운데배열
img {display: block; margin: 0px auto;} 이미지가운데 정렬
< hr> < /hr> 주제의 분리 가로줄, 선긋기
< pre> < /pre> 사용자가 입력한 그대로 화면에 표시
< xmp> < /xmp> 태그를 문자 취급 (태그도 그대로 출력된다는 의미)
< mark> < /mark> 텍스트에 하이라이트 표시

< footer> © 2020.N.C <-꼬릿말
< span> 짧은 텍스트를 의미
< main> 내용을 의미
< header> div 대체 태그
< div> division (분할)아무런 값이 없는 단순한 box
< !--주석-->

Font < font 속성 = 값> </ font>
face = "글꼴이름"
size = "숫자"
font-family: 글꼴이름
google font
https://fonts.google.com/specimen/Nanum+Myeongjo?subset=korean
텍스트 줄 간격 좁히기
html- < p style="line-height: 1;"> text < br> text2 < /p>
단어 사이의 여백
css - letter-spacing: 1px; 값이 커지면 간격이 커진다

img
GIF
256개의 색상만 지원하여 다른 파일에 비해 용량이 작다.
아이콘이나 단색 계열의 배경을 만드는데 적합
손실이 발생하지 않는 무손실 압축방식을 사용
투명이미지와 움직이는 애니메이션 이미지를 만들수 있음
간단한 배너광고나 불릿 제작가능

JPG
작은 용량으로 사진과 같이 섬세한 색상과 명암을 표현하기 때문에 웹에서 가장 많이 사용
1,600만개의 색상을 사용하여 압축률이 높다. 손실 압축 방식이라 압축과정에서 약간의 손실발생
gif와 같은 투명 이미지나 움직이는 이미지는 만들 수 없음

PNG
무손실 압축방식을 사용하기 때문에 높은 품질의 이미지를 처리할 수 있고 gif와 같은 투명이미지도 사용할 수 있어 최근 사용 빈도가 높아지고 있음
이미지가 복잡할 경우 파일의 크기가 커지는 단점이 있다

< img> 태그의 속성
src 삽입하는 이미지 파일의 이름(경로포함) 지정
width 이미지의 너비 지정
height 이미지의 높이 지정
title 마우스 포인터를 갖다 댔을 때 나타나는 이미지 설명 지정
< img />( 이미지는 텍스트가 없기때문에 self closing tag) src=sorce
선택1. < img 이미지주소복사 />
선택2. < img 폴더,확장자와동일한이름 />
선택3. < img 경로/확장자와동일한이름 />
< img src = "이미지경로" alt = "이미지에 대한 설명(코멘트)">

상대경로
현재폴더의 위치를 기준으로 대상 파일이나 폴더의 위치를 지정
절대 경로보다 서버의 폴더 구조나 도메인 변경 및 웹 페이지 제작, 수정에 편리
일반적으로 상대경로를 더 많이 사용
< img src = "ground_pink.jpg">

절대경로
httl://로 시작하는 주소
인터넷상에 하나밖에 없는 유일무이한 고유한 경로를 의미
< img src = "http://ruvato.kr/images/logo.gif">

< a> (anchor)
다른 사이트 혹은 같은 무서 내 다른 위치로 이동할 때 사용
href 속성값에 url을 입력해 원하는 곳으로 이동
link ->부가적 href (hyperlink reference)(anchor 태그에만 추가가능)
< a href = "URL">
target="_blank"(새창으로 열림)
< a href ='#'> #을 넣으면 자기자신의 시작페이지로 이동

아무것도 없으면 현재폴더라는 의미
./ 현재폴더라는 의미
../ 이전폴더라는 의미
/폴더이름/a.jpg 폴더 이름 안에 있는 a.jpg이미지 라는 의미