CSS
html을 통해서 문서를 만들 수 있게 된 후, 사람들은 곧 그것을 아름답게 꾸미고자 하는 욕망이 생긴다.
이를 충족시키기 위해 처음에는 단순히 html tag를 추가하는 방식으로 이를 해소했으나, 점점 그것에 대한 한계를 느끼고 CSS라는 디자인을 위한 언어를 새로 만들게 된다.
CSS라는 디자인을 전담하는 언어를 사용하며 html은 문서의 정보만을 표현하는 그 본질을 유지할 수 있게되었다.
CSS 코드는 아래와 같이 html태그인 <style>태그를 통해 html에게 인식시킨다.
<!doctype html>
<html>
<head>
<title> nine57 </title>
<meta charset = "utf-8">
<style>
<!--이곳에 CSS를 입력한다.-->
a {
color:red;
}
</style>
</head>위의 CSS는 html의 <a>태그의 색상을 변경하는 코드로, 저 한 줄로 <a>태그 전체의 색상을 변경할 수 있다.
이를 통해 수백, 수천개, 그 이상의 중복되는 <a>태그를 중복된 코드 없이 단 한 줄로 변경할 수 있는 혁신적인 효과를 갖게된다.
이는 관리의 효율성 뿐만 아니라 코드의 가독성도 높아진다.
위의 <style> 코드 안에 있는 a { }는 선택자(selector)로 중괄호 안에 있는 내용의 CSS코드(효과/declaration(선언))가 어디에 적용될지를 지정하게 된다.
CSS코드의 내용중 color부분은 속성(property), red부분은 값(value)이라고 부른다.
CSS 코드를 위와 같이 따로 빼서 작성하는 것이 아니라 본문의 특정 태그에만 적용하고 싶을 경우에 태그 안에 <style>속성을 사용하여 CSS코드를 작성할 수 있다.
이러면 html 태그가 해당 속성 안의 내용을 CSS로 인식하고 표현하게 된다.
class, id
head의 <style>에서 html의 태그에 대해 CSS 선택자를 적용하는 것 말고, 각각의 태그에 대해 고유값을 붙여 그 고유값에 대한 그룹에 CSS를 적용시킬 수 있다.
<class>,<id> 태그를 사용하면 각각의 태그에 고유 이름을 붙일 수 있다.
<class = "이름">,<id = "이름">와 같은 방법으로 사용하며,
이 이름을 아래와 같이 . 과 # 으로 선택자를 호출한다.
<class> = . 이름 { }
<id> = # 이름 { }
만약 같은 효과를 적용하는 CSS가 여러개 적용되면,
같은 class나 또는 같은 id 내에서는 가장 마지막에 사용되는 효과의 우선순위가 가장 높다.
만약 적용되는 효과가 tag, class, id로 서로 다르다면, id > class > tag 의 순서대로 우선순위가 높다.
(id는 학교에서 학번과 같은 역할로 완전한 고유값을 갖는다. 즉, 페이지에서 이 id는 한번만 쓰여야 한다. 비슷하게 class는 학교에서 반이라고 생각하면 된다. 이런식으로 생각하면 위의 우선순위를 이해하기 쉽다.)
tag에 직접 선택자로 쓰게되면, 웹 페이지에 있는 모든 해당 tag효과가 적용되는 원치 않는 결과가 나올 수 있다.
따라서 tag를 특정하기 위한 방법으로(id를 또 쓸 수도 있지만,) 상위의 부모 tag에 있는 id에 원하는 tag를 붙여서 사용하면 그 id 하위의 자식 tag에만 적용시킬 수 있다.
*ex) #id tag{ }
박스 모델
제목을 표현하기 위한 <h1> 태그는 화면에서 전체를 차지하는 'block level element' 이다.
이와 다르게 일반적인 태그, 대표적으로 많이 쓰이는 <a> 태그는 전체를 차지하면 정보 표현이 불편하기 때문에 다른 컨텐츠와 같은 줄에 연속되서 표시된다. 이런 속성을 'inline element'라고 한다.
<display> 속성을 이용하면 <h1>도 inline으로 바꿀 수 있고, 반대도 가능하다.
각각의 컨텐츠는 다른 컨텐츠와의 간격을 갖고 있고 이를 <padding>, <margin>등의 CSS 코드로 변경할 수 있다.
웹 브라우져에서 페이지의 소스보기를 통해 <padding>, <margin>이 어떻게 그려지는지 박스로 시각화하여 검토할 수 있다.
그리드
<padding>, <margin>를 사용하면 대략적인 웹페이지의 구성을 만들 수 있지만, 기획안대로 완벽히 구현되기에는 어렵다.
각각의 컨텐츠들을 배치하기 위해서 단위별로 컨텐츠를 묶어주는, 어떠한 의미도 갖고 있지않은 디자인만을 위해 존재하는 태그 <div>가 있다.
<div>는 기본적으로 block level element 속성을 갖으며,
유사한 태그로 <span>이 있다. <span>은 inline의 속성을 갖는다.
컨텐츠의 배치를 위해 <div>태그를 서로 부모자식으로 놓을 수 있다.
*기술의 호환 여부
어떤 새로운 기술에 대해서 그것이 사용가능한지에 대해 알 수 있는 웹사이트가 있다. Can I use라는 사이트로 각 브라우져의 종류, 버전 별로 기술의 호환여부를 확인할 수 있다.
