인터넷 홈페이지를 제작할때 우리는 HTML과 CSS, 그리고 JS를 사용해 홈페이지를 제작한다. HTML이 홈페이지의 기본 뼈대를 이루고 그위에 CSS로 색깔이나 모양을 입히며 JS로 움직임을 주면 홈페이지가 완성된다.
이번 시간에는 HTML 문장 속에서 CSS를 어떻게 사용하는지 그 방법을 알아보고 좀더 쉽게 HTML과 CSS를 익히는 계기가 되기를 바란다.
먼저 HTML만을 이용하여 브라우저 화면에 글자를 써보자. 아래 그림이 HTML만을 이용하여 화면에 글자를 나타내는 전형적인 방법인데 <h1></h1> 태그를 이용하여 6개 과일의 이름을 화면에 나타냈다.
위의 코드를 실행시켜 보면 아래와 같이 6개 과일의 이름이 검은색으로 출력된다. 여기서 CSS를 사용하여 글자의 색을 바꾸는 코드를 짜 볼 것이다.
CSS를 HTML 속에 나타내는 방법은 3가지 존재하는데 하나 하나 그 방법들을 알아보자.
먼저 인라인 스타일 방식이다. 인라인 스타일 방식은 태그 안에 CSS를 의미하는 style을 바로 삽입해서 하나의 태그라인 안에서 코드를 마무리 하는 방식이다. <h1> 태그 안에 style = "color:red;" 이라는 CSS 속성을 입력해서 글자의 색깔을 지정한다. 사과, 배에는 빨간색을 오렌지와 귤에는 파란색을 그리고 바나나와 포도에는 검은색을 지정했다.
위의 코드를 실행하면 다음과 같이 글자들의 색상이 바뀌어서 나타난다.
두번째 방식은 내부 스타일 시트 방식이다. 내부 스타일 시트방식은 CSS 코드를 의미하는 <style></style> 태그안에 CSS 코드를 삽입하는 방식이다. 내부 스타일 시트 방식으로 CSS 코드를 입력하기 위해서는 요소(태그) 선택자와 클래스 선택자, 그리고 id 선택자라는 것을 이용해야 한다. 요소(태그) 선택자는 <h1> 태그를 의미한다. <h1>태그 자체에다 {color:red;}로 색상을 지정하는 방식이다. 그리고 클래스 선택자는 <h1> 태그 안에서 (class = "클래스 이름")을 지정해 주고 <style></style> 태그안에서는 (.클래스 이름 {color:blue;})을 설정해서 색상을 지정하는 방식이다. (.)이 class를 나타내는 기호이므로 잘 기억해 두어야 한다. id 선택자는 <h1>태그 안에서 (id = "id 이름")을 지정해 주고 <style></style> 태그안에서는
(#id이름 {color:black;})을 설정해서 색상을 지정하는 방식이다. (#)이 id를 나타내는 기호이므로 잘 기억해 둔다. <style></style> 태그는 <head></head>안에 두어도 되고 <body></body> 태그 안에다 두어도 되나 관행적으로 <head></head> 태그안에 둔다.
위의 코드를 실행하면 아래와 같이 글자의 색상이 나타난다. 인라인 스트일 방식과 똑같이 색상이 바뀐 것을 볼 수 있다.
이제 세번째 방식으로 외부 스타일 시트 방식이다. 외부 스타일 시트 방식은 HTML 파일 밖에 따로 CSS 파일을 만들어서 그 파일에 link를 걸어서 가져오는 방식이다. CSS 파일의 내용은 내부 스타일 시트 방식에서 <style></style> 태그 안에 있던 CSS 코드와 똑같다.
HTML 파일과 같은 폴더에 CSS 파일이 있으면 파일 이름만 적어 주면 되지만 다른 폴더에 있다면 파일의 정확한 path를 적어 주어야 한다. <head></head> 태그의 제일 밑에 <link rel="stylesheet" href="htmlCssTest.css" /> 를 입력해서 CSS 파일을 불러온다.
위의 코드를 실행하면 인라인 스타일 방식, 그리고 내부 스타일 시트 방식에서 보았던 것과 똑같이 글자의 색이 바뀌어서 나타난다.
위에서 알아 본 바와 같이 인라인 스타일 방식, 내부 스타일 시트 방식, 그리고 외부 스타일 시트 방식이 HTML 코드안에서 CSS 코드를 나타내는 방식이다. 처음 HTML과 CSS를 배울 때는 HTML 코드안의 어디에 CSS코드를 넣어야 하는지 잘 모르는 경우가 많은데 위의 3가지 방식으로 HTML과 CSS를 연결 시키므로 잘 알아 두자.
'SW 배움터' 카테고리의 다른 글
| 비주얼 스튜디오 코드 AI 코드 완성 도우미 Tabnine 소개 (0) | 2023.01.19 |
|---|---|
| JS, Python, Java에서 이미지 출력 비교 (0) | 2022.10.26 |
| 인터넷 기반 AI 티처블 머신 배우기 (0) | 2022.10.15 |
| kodular 소개 (0) | 2022.09.28 |
| 제이쿼리(jQuery)와 자바 스트립트(JS)의 코드 길이 비교 (0) | 2022.09.27 |