[HTML/CSS] border/리스트/float/하이퍼링크

테두리 : border

border : 10px soild black;  ( width style color)

12개의 서식을 한꺼번에 지정해줌 (top, bottom, right, left)

border-width : 10px; 
border-width : 10px 20px;  /*top/bottom, right/left*/ 
border-width : 10px 20px 30px;  /*top, right/left, bottom*/ 
border-width : 10px 20px 30px 40px; /* 시계방향 Top에서부터 기준*/ 

서식을 지울땐 none을 쓸 수 있음

• margin : 겉 여백
• padding : 안 여백

border와 같게 top, bottom, right, left설정이 존재

갯수에 따라 위 아래 좌우방향의 여백을 각각 쓰지않고 (ex) margin-top-width) 설정할 수 있음

(<p> <p>사이의 margin값은 margin의 2배가 아니고 marigin을 공유한다)

/* margin : 20px; */
/* margin-left: 25%; */

margin : 20px auto;
/*위 아래 20px, 옆 자동*/

정렬 text-align

text-align : center / right / left

테두리 전체 크기 width

width : 50% / px / cm  (margin, padding은 50%범위에 포함되지 않음 실질적으론 50보다 더 큰 범위 차지

<strong> = <s>  굵게 ( font-weight : bold; )
<em> = <i>        기울임체  ( font-style : italic; )
취소t선 > text-docoration : line-through / underline / overline

목록표시

<ul>	번호없이 정렬되지 않은 목록 정의
<ol>	순서가 지정된 목록 정의
<dl>	설명 목록 정의
<li>, <dt>, <dd>	리스트의 항목 정의 (dl로 묶어줌) - dt : definition term - dd : definition description
리스트 항목 안에도 텍스트, 이미지, 링크, 다른 리스트를 넣을 수 있다.

<ul>의 style 지정(list-style-type)

list-style-type:circle / square /  none ;
list-style-image: url("../폴더명/파일이름.png"); (같은 폴더 명부터 시작)
list-style-position : inside; ( 들여쓰기 형태, 기본은 outside 형태 )

옆으로 배치 (float)

float : left / right

중간에 끊어주기 위해선 block역할을 해줄 수 있는 것을 써줘야함 (hr,p,h1~h6 ...)

하이퍼링크

<a href="URL" [target=" "]> 

href속성에 URL이 아닌 id이름을 넣으면 해당하는 곳으로 이동  ex ) <a href=#list1>

(target을 지정해주지 않으면 기본값 _self)

_self와 _blank 구별해서 사용하기

기타 element

<hr>	수평선
<br>	단일 줄바꿈
<p>	단락(Paragraphs)를 정의 (단락 전 후에 빈줄이 추가)
<div>	긴 단락 (모든 태그가 포함될 수 있다)
<pre>	미리 서식이 지정된 텍스트 (고정 너비 글꼴로 표시되며 공백과 줄바꿈을 모두 유지)
<!-->	주석
<h1> ~ <h6>	제목
<b>	굵게 (볼드체)
<i>	기울어진글자
<strong>	볼드체로 표시하고 음성 읽기 도구에서 볼륨이나 톤등을 변경해 강조해서 읽어줌 ( 웹 접근성) / 중요한 텍스트시 사용할 것
<em>	이탤릭 체로 표기하고 음성 읽기 도구에서 볼륨이나 톤등을 변경해 강조해서 읽어줌 ( 웹 접근성)
<mark>	강조할 텍스트에 하이라이트(배경색상)를 표시하여 정의
<sup>	위 첨자(superscipt)
<sub>	아래 첨자(subscript)
<img>	<img src="url" alt="대체 이름"> width="가로크기" height="세로크기" 도 넣을 수 있지만 html5에선 권장되지 않음