UXUI 국비지원 : CSS <style> 모듈화와 <class>태그

공부는끝이없다/HTML5&CSS

by hkzeze 2020. 6. 2. 15:56

저번주 금요일(05.28)에는 html5 중 CSS를 배웠다. 지난 시간에 html5는 스케치라고 하면 CSS는 채색단계라고 표현한 적이 있는데 ~~(뭐 맞는 표현인지는 모르겠으나)~~ 채색 답게 진짜 하나하나 다 명령어를 입력해야 해서 한 시도 눈을 뗄수가 없었댜.........

어째뜬 html5에서 CSS를 시작하려면 <style>태그를 입력하거나, 외부스타일 폴더로 링크를 연결해 주는 두 가지 방법이 있다. 후자를 '모듈화'라고 한다.

배운 내용을 정리하자면,

1. <style>태그 이용해서 텍스트에 css 적용하기

2. <style> 모듈화

3. <style> 태그에서 <class> 이용하기

1. <styel> 태그 이용해서 텍스트에 CSS 적용하기

<title> 태그 밑에 <style>부터가 css다. <body>부터 브라우저에 보이는 부분이기 때문에 여기를 css 적용해 주기 위해서 <style>에 명령어 h1, h2, p를 이용한다.

<style>

h1{font-size:40px; color:#5F00FF;} -------> h1에 폰트사이즈 40, 색깔은 보라색으로 해줘

</style>

여기서 h1 -> css적용대상

{} -> 명령 시작, 끝

; -> 요소 끝

또 CSS에 주석을 달려면,

/*주석내용*/

(*HTML 주석

2. <style> 모듈화 : 외부스타일 폴더로 링크 연결

CSS를 html에 <style>로 넣지 않고 외부 폴더로 빼서 링크를 연결하는 방식이다.

예를 들면,

저기서 <head>안에 <link rel='stylesheet' href='css/style.css'>가 모듈화해서 외부 스타일 폴더를 입력한 것이다.

css/style.css 의 경우 css폴더에 style.css 파일에 스타일 태그가 들어가 있다. 폴더에 하나씩 들어갈 때 마다 /(슬래쉬)를 해주고 확장자.css를 꼭 까먹지 않도록 한다.

사담으로, 옆에 분이 똑같은 코딩으로 짰는데 style 적용이 안된다고 해서 온갖 짓을 둘이서 다 해보았으나 도통 머가 정답과 다른 지 알수 가 없어서 컴퓨터 문제인가 싶었는데, 확장자를 .css로 안하고 .txt로 저장해 놓은것......... ~~설마 그걸 텍스트 문서로 저장했을 거라고 생각하지 못해따.........☆~~

암튼 css폴더에 들어가서 style.css 로 들어가면 ,

위 처럼 코딩을 짜놓으면 html에 <style> 태그로 줄줄 쓰지 않고도 외부링크 한줄, 두줄로 간편하게 적용을 할 수 있다.

3. <style> 태그에서 <class> 이용하기

이번에는 여러 태그에 같은 효과를 넣을 때 <class>태그를 적용해 보겠다.

<class>는 <style>요소에서 선언을 하는데, .(.dot)클래스명 으로 입력한다.

<class>는 html에서 여러번 사용할 수 있고 웹 전체적인 스타일을 만들때 자주 사용한다고 한다.

*참고로 <id>는 특정 태그에 효과를 넣을 때 활용을 한다고 했고, 고유해서 한 문서당 한번만 사용을 할 수 있다.

다만 같은 속성을 선언했을 때 우선 순위는 id>class>tag 순이다. 즉 id와 class가 같은 속성을 선언하면 id 값만 적용이 된다는 것!

첫째 줄과 둘째줄을 들여쓰기 하기 위해서 indent라는 클래스를 지정해 준다(style1 외부 폴더에 지정).

그리고 '동적 구현'부분에 하이라이트를 적용해 주기 위해서 <span>태그를 이용해서 텍스트 배경 지정을 해준다.

휴... 정리하다보니 복잡해 진거 같긴한데 어쨌든, 재밌긴 하다.

저작자표시 비영리 변경금지

'공부는끝이없다 > HTML5&CSS' 카테고리의 다른 글

Box model : div 태그와 레이아웃 만들기 (0)	2020.07.20
[HTML5 태그] 텍스트 태그와 목록태그 <ul>, <ol>, <dt>,<dd> (0)	2020.07.09
웹표준에 따른 <hn>태그와 <strong>태그 (0)	2020.07.07
HTML/CSS : 하이퍼링그 <a> 태그로 링크 달기 (0)	2020.06.23
UXUI 국비지원 교육과정 : html 기초 이미지와 텍스트 삽입 (0)	2020.05.29