HTML
html은 구조 css는 표현
HTML문서의 기본구조
<html></html>
-태그는 <와 >로 구분
-태그는 소문자로 쓴다
<br> <img>등 단독태그는 여는 태그만 (닫는태그 필요x)
파일명 한글 안됨, 띄어쓰기 안됨(-._ 사용)
태그 => 요소 element
속성= 값 // attribute = “value”
head에는
<meta charset="utf-8">
필수 — 다국어가 지원된다 이거 안하면 한글 엑박 떠
<!doctype> : html 기본문법
<hn> 태그 – 제목 표시하기 <h1>이 제일 크고 <h6>이 제일 작다 (중요도순)
이걸 실행하면
제목을입력하세요
제목을입력하세요
제목을입력하세요
제목을입력하세요
제목을입력하세요
제목을입력하세요
이렇게 된다.
<p> 태그 – 단락 만들기 <p>단락은 </p>태그를 만날 때 까지 줄바꿈 없이 텍스트를 한 줄로 표시
<br> (단독태그)ー줄바꿈
<hr>수평선
<pre> 솟에 표시한 공백이 브라우저에 그대로 표시됨.
<strong>strong은 중요도있는굵음</strong>
<b>b는 그냥굵게</b>
<em>em강조이탤릭</em>
<i>i그냥이탤릭</i>
<mark>mark형광펜효과내기</mark>
<span> span 줄바꿈 없이 영역 묶기</span>이걸 실행하면
strong은 중요도있는굵음
b는 그냥굵게
em강조이탤릭
i그냥이탤릭
mark형광펜효과내기
span 줄바꿈 없이 영역 묶기
<ul><li> 순서 없는 목록 (불릿나옴)
<ol><li>순서 있는 목록 만들기 (1,2,3 나옴)
<dl> <dt>제목 -> <dd>설명 정의가 있는 목록 무조건 dt 먼저 하고 dd 쓰기
<ul>과 <ol> 하위에는 반드시 <li>가 나와야 하지만
<li> 하위에는 또 ul, ol 들어갈 수 있다. 중첩가능이걸 실행하면
- 순서 없는 목록 (불릿나옴)
- 순서 있는 목록 만들기 (1,2,3 나옴) 제목 -> 설명 정의가 있는 목록 무조건 dt 먼저 하고 dd 쓰기
과
하위에는 반드시
- 가 나와야 하지만
- 하위에는 또 ul, ol 들어갈 수 있다. 중첩가능
링크만들기
<a href= “주소” [속성= “속성값”]> 텍스트 </a>
href 링크한 문서나 사이트의 주소를 입력
target – 새 탭에서 링크 열기
_blank : 링크 내용 새 창이나 새 탭에서 열게 하기
_self : target 속성의 기본값으로 링크가 있는 화면에서 열립니다.
<a href = “주소” target = “_blank”></a> --> 새 창에서 링크 열기
절대경로 – 웹서버의 주소로 연결
현재 디렉토리 : ./
상대경로 – 현재 만들고 있는 문서 기준 연결한 문서나 이미지의 위치 지정
같은 위치 : 같은 디렉토리 상에 위치(같은 폴더에 위치) 파일명.확장자
위에 위치 : ../파일명.확장자
아래 위치 : 폴더명/파일명.확장자.
<img src = “” alt = “”> alt 는 대체 텍스트 (웹 표준 위해 alt 꼭 써야한다. 빈alt가 허용되는 경우 = 컨텐츠 설명필요 없는 경우, alt에는 컨텐츠 내용 다 들어가야 해 , 이미지에 대한 대체텍스트가 이미 나와 있는 경우나 꾸며주기 위해 내용 없는 이미지는 빈알트 가능
CSS
태그선택자
클래스 선택자 (특정 부분에 스타일 적용) class = “” , .으로 호출
아이디선택자 (특정부분에 스타일 적용) id = “” , #으로 호출
선택자{속성:값;속성:값}
EX) p{속성:값; . . .}
인라인css (inline) 태그 안에 스타일 같이 집어넣기
내부css 사이에 에 작성
외부css
아이디 클래스
-숫자 시작 안됨 -한글 안됨 -영문소문자 -특수문자 안됨 _- 가능 -영문 숫자의 조합 가능
주석처리
커서 주석 ctrl + / 하면 된다. html은 css는 /* */
부분 주석 하려면 alt + shift + a
글꼴
font-size 기본값 16px
font-weight : normal(400) 글자굵기
font-family : 서체명
텍스트정렬
text-align : 텍스트 정렬
start/end/left/right/center/justify/match-parent
줄간격 조절
line-height 줄 간격 조절 : 글자 크기가 기준 ex) 글자 크기 12px이고 줄간격이 2.0이면 줄 간격은 12px의 2배인 24px이 된다.
word-break ; 줄바꿈 속성
영어는 keep-all 이 기본, 한글은 break-all이 기본
keep-all은 단어별 / break-all은 철자별
테두리속성
border
border 1px solid black 이런식으로 작성
css 우선순위
- 위에서부터 아래로
- 경로가 있는 것이 경로가 없는 것보다 우선순위
- 인라인 > 내부스타일 > 외부스타일
- #아이디 > .클래스 > <>태그
- 인라인 스타일(Inline Style) > 내부 스타일(Internal Style) > 외부 스타일(External Style) >브라우저
기본값 순으로 적용한다.- 아이디 > 클래스 > 태그
- 경로를 다 적은 것이 경로를 안적은 것보다 우선순위
- 똑같은 등급일 때 가장 마지막 스타일 효과를 적용한다.
- 명시도(specificity)값을 계산해서 가장 많은 점수를 받은 효과가 우선순위가 적용한다.
