- a태그와 href 속성값
a태그는 href속성의 속성값에 따라 다양한 기능을 한다.
ex. (a href="속성값")
속성값의 자리에
웹 주소 url을 입력하면 해당 사이트로,
/ 를 입력하면 최상위 폴더내의 메인페이지로(index.html),
./폴더이름/파일이름.html은 해당 html 페이지로 이동시켜준다. 이외에도
mailto, tel, sms 를 통해 메일이나 전화, 문자를 전송할 수 도 있으며,
#으로 임시경로를 표시할 수 도 있다. 임시경로란 당장 페이지의 이동은 이루어지지 않지만, 아직 연결할 페이지가 준비되지 않았을 때 임시로 입력해두는 경로이다.
- CSS
CSS란 Cascading Style Sheets의 약자로 HTML과 함께 웹 표준의 기본개념이다.
HTML은 문서의 뼈대를 만드는 역할을 하고, CSS로는 그 뼈대에 디자인을 입히는 역할을 한다.
CSS는 이름의 뜻대로 아래에 있는 속성이 먼저 적용된다는 특징이 있다.
CSS는 선택자가 가장 먼저 등장하고, {}안에 속성:속성값을 입력하고 ;으로 마침표를 찍어준다.
ex. a{color:red;}
- 스타일과 스타일시트
스타일이란 스타일 속성을 입력해 웹 페이지를 디자인하는 것을 의미한다. 즉, css문법을 이용하여 속성과 속성값을 입력한 한 줄을 스타일이라고 한다. 이런 스타일이 여러개 모인 하나의 문서를 스타일 시트라고하는데, 이는 사용하는 방법에 따라 크게 3가지로 나뉜다.-
내부 스타일시트
내부 스타일시트란 html 웹문서에 head태그 안에 style태그를 이용하여 css를 작성하는 방식을 말한다. 한 문서에 작성하기때문에 편리한듯하나, 코드가 길어질 경우 작성과 수정이 불편하고, 파일의 크기가 커진다는 단점이 있어 잘 쓰이지 않는다. -
★외부 스타일시트★
css폴더를 따로 만들고, 별도의 css문서를 만들어 html과 연결해 쓰는 방식을 말한다. 기본적으로 실무에서 가장 많이 사용되는 방식으로, 문서관리나 수정이 편리하다는 장점이 있다.
외부 스타일시트는 link태그로 html파일과 연결할 수 있다.
link태그는 head태그 안에 써야하며, link태그를 통해 css나 파비콘 등으로 연결한다. -
인라인 스타일
태그 내부에 style속성을 이용하여 직접 적용하는 스타일을 말한다. 인라인스타일은 1,2 시트보다 우선순위가 높다. 즉, 이 스타일이 적용되면 브라우저에는 여기서 적용된 스타일이 보여지게 된다.
우선순위가 높으면 다른 방식으로는 코드수정이 어렵기때문에 현재는 거의 쓰이지 않고, 웹 초창기에 주로 쓰이던 방식이다.
스타일시트 우선순위
인라인스타일 - 내부스타일시트 - 외부스타일시트
CSS의 선택자
선택자란 css에서 불러온 태그요소를 의미한다. id, class, 태그선택자 크게 이렇게 3가지로 나뉜다. id와 class는 태그안에 쓰는 속성명으로 태그에 이름을 붙여주는 역할을 하며,해당 태그에 특별히 적용할 속성이 있을때 붙여주는 이름을 지정한다.- 태그 선택자
html태그에 스타일을 적용하는 선택자로 태그에 직접 스타일을 적용한다.
ex.p{속성:속성값'}
이처럼 선택자 자리에 태그의 이름을 그대로 써준 뒤 속성과 속성값을 나열한다.
태그선택자는 html파일안에 있는 모든 해당 태그에 공통적으로 스타일을 적용한다.
보통 css 초기화 작업에서 많이 사용되며, 우선순위가 가장 낮다.
2. class 선택자
특정 태그에 스타일을 적용하고 싶은 경우 사용하는 선택자로 두번째 우선순위를 가지고 있으며, 가장 많이 사용되는 선택자 형식이다.
html문서에서 원하는 태그 뒤에 공백을 두고 class=class 명 형식으로 이름을 지정하면 css에서 이 이름을 지정당한 태그들만 스타일을 적용할 수 있다.
css에서 class 선택자를 불러올때는 앞에 .을 찍고 class명을 기재해준다.
class명을 지정할때도 이름규칙을 따르며, 의미와 맞아야하고, 태그이름과 겹치면 안된다. 단, class명은 다른 태그와 중복사용가능하다.
ex.
html :
< h2 class="title_big >제목< /h2 >
(h2태그 안에 제목이라는 글자가 있으면,
이 제목이라는 글자에 title_big이라는 이름을 지어줌과 동시에,
태그 뒤에 class=class 명 을 적어
css에서 적용한 효과가 해당 단어에 적용되게 한다.
css:
.title_big{속성:속성값;}
(title_big은 내가 지어주는 이름)
- id 선택자
class처럼 태그에 특정한 css속성을 적용하고 싶을때 사용하는 방법이지만, id로 지은 이름은 딱 1번만 사용가능하다. 사용 방법은 class 선택자와 동일하지만, css에서 불러올때 .대신 #을 사용한다. id선택자가 선택자중에서 우선순위가 가장 높다.
ex.
html :
< h2 class="title_big >제목< /h2 >
css:
#title_big{속성:속성값;}
선택자 우선순위
id 선택자 - class 선택자 - 태그 선택자
