HTML 과 CSS - 웹사이트의 기본

이번에는 웹사이트를 만드는데 필요한 코드를 만들기 위한 HTML과 CSS에 대해 간단히 알아볼게요!!

 

​

 

HTML 

 

HTML(Hyper Text Markup Language)은 웹 페이지의 토대가 되는 언어입니다.

웹페이지의 정보와 웹 페이지에 표시하고자 하는 문장 등을 < 와 >로 묶은 태그로 표현합니다.

여러 종류가 있으며 어떤 태그로 묶느냐에 따라 역할이 달라집니다.

이와 같이 HTML로 작성된 문서를 HTML문서라고 하며 이것으로 작성된 문서를 웹브라우저가 해석하여

이용자에게 보여주게 되는 것이지요. 언젠간 한 번쯤은 무조건 본 적이 있을법한 녀석입니다.

 

​

​

​

​

​CSS

 

CSS (cascading Style Sheets)는 웹 페이지 외형을 바꾸기 위한 언어입니다.

HTML만으로 웹 페이지를 만들면 흰 배경에 검은 글씨 그리고 위부터 아래로 나열되는 콘텐츠로만 구성된 매우

심플한 구조가 됩니다. 여기에 색상, 글씨 크기, 레이아웃을 추가해 장식하는 것이 바로 CSS입니다.

 

​여기서 CSS의 구성요소를 한번 보면, h1을 셀렉터 {color :#0bd; }가 선언블록, 그 안의 내용이 선언

color가 속성, 지정한 파란색인 blue가 값이 됩니다.

​

h1 {

color : blue;

}

​

 

셀렉터, 속성, 값을 조합해 어디에, 무엇을, 어떻게 바꿀 것인지를 설정하게 되는 것입니다.

조심할 점은 속성을 여러 개 설정할 때는 선언한 속성의 끝에 ; 을 추가해 구분합니다.

속성이 하나밖에 없을때는 마지막에 ;을 붙이지 않아도 됩니다. 하지만 보통 작업을 할 때에는 나중에라도

다른 속성을 추가하는 경우가 많으니 오류를 막기 위해서라도 마지막에 ; 을 붙이는 습관을 들이는게 좋겠습니다.

​

​

​

HTML 태그 속성에 class와 id를 정의할 수 있는데요. 그 다음 css와 결합해서 그 부분만 장식을 변경할 수 있습니다.

css파일에서는 마침표뒤에 클래스 명을 쓰고 적용하고자 하는 스타일을 지정합니다.

ID를 사용하는 경우 임의의 태그에 id속성을 정의한 뒤 ID명을 정합니다.

​

 

클래스명과 id명은 어떻게?

 

직접 설정이 가능하니 최대한 쉽게 설정하는 것이 좋습니다. 나중에 다른 관리자가 봐도 무엇을 뜻하는지 알 수 있도록 말입니다. 그럼에도 꼭 지켜야할 규칙이 있는데요.

​

1. 첫글자는 반드시 영어로 시작해야 한다.
2. 공백은 사용하지 않는다
3. 영어, 숫자, 하이픈, 언더바만 사용한다.

​

ID는 페이지 내에서 같은 ID명을 여러 번 사용할 수 없지만 클래스는 여러 번 사용할 수 있다는 차이점이 있으니

어느 페이지에서도 바뀌지 않는 부분에는 ID를, 몇 번이나 쓰이는 장식에는 클래스를 사용하도록 하는 게 좋습니다.

​

​

오늘은 정말 간단하게 HTML과 CSS에 관해 알아보았습니다.

조금이라도 도움이 되셨다면 좋겠습니다!!!