1. .CSS 파일
External Css는 스타일만 별도로 모아놓은 파일을 HTML 문서에 적용시키는 방식으로 스타일을 구현한다.
그래서 원하는 문서에 간편하게 스타일을 적용시킬 수 있다는 장점을 갖고 있다.
이 때 확장자명은 .html이 아니라 .css가 된다.
그래서 저장할 때부터 .css 확장자로 저장을 하여야 한다.
이 확장자는 파일 자체가 스타일을 나타내는 것이기 때문에 아래와 같이 스타일 태그를 입력하면 오류가 난다.
2. External CSS 사용법
1) 문자 코드 넣기
이 스타일 파일엔 한글을 사용하겠다는 코드를 우선적으로 입력한다.
꼭 입력해야하는 것은 아니지만 이 파일에는 다양한 주석도 한글로 들어갈 것이기 때문에 왠만하면 이 문서가 한글로 작성될 수 있도록 문자 코드를 입력해주는 것이 좋다.
코드는 @charset "UTF-8"이다.
* UTF-8
문자를 표기하는 유니코드의 가변형 변환 양식,,, 이라고 하지만 잘 이해가 안될 것이다.
각 문자가 가진 코드는 언어마다 다른데 이 변환 양식을 사용하면 문자 마다의 각기 다른 코드 변환을 시켜줘서 다른 문자들을 혼용해도 괜찮을 수 있도록 도와주는 방식이라 이해하면 될 것 같다.
그러니까 [a가sffs나] 라는 단어들을 마구 치면!
기존에는 이 한 문장을 하나의 코드로 변환하려고 했는데
UTF-8은 a, 가, s, f, f, s, 나 이렇게 각각의 단어를 개별적으로 변환하는 것이다.
* charset
혹시 궁금한 사람이 있을까봐 달아두는 주석!
char는 문자형 자료형을 뜻한다.
@charset "UTF-8"을 직독직해하면 '이 문서의 문자는 UTF-8을 사용해서 출력할 것이다'라는 뜻이다.
2) 내가 스타일을 적용하고 싶은 범위를 나타내는 선별자 기호를 사용하여 스타일 지정해주기
소제목이 참 길었다.
내가 스타일 파일에 글씨에 대한 여러가지 스타일을 적용하겠다는 코드를 작성했다.
그리고 내가 적용할 파일의 요소 전체에 이 스타일을 적용하고 싶다.
그럴 땐 스타일 앞에 * 라는 선별자를 붙인다.
아래 코드를 확인해보자.
@charset "UTF-8";
/*문자 인코딩 UTF-8*/
/*반드시 첫줄에 와야 한다*/
* {
font-family: 궁서체;
font-size: 15px;
font-style: italic;
font-weight: bold;
}/*모든 요소들*/
*과 같은 이런 코드들은 아래의 사이트에서 확인할 수 있다.
들어가서 필요한 코드를 적절히 사용해보자.
https://www.w3schools.com/cssref/css_selectors.asp
CSS Selectors Reference
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
3) 스타일 파일 적용하기
스타일 태그를 사용했던 것처럼 <head> 태그 안에 코드를 작성한다.
<link rel="stylesheet" href="mystyle.css">
여기서 위의 코드의 내용을 보충설명해준다면
- link는 연결하다는 뜻이다.
- rel은 relation(관계)의 줄임말이다. 무슨 뜻이냐면 뒤에서 링크되는 것이 이 페이지와 어떤 관계이냐? 라고 묻는 것이다. 거기에 이 코드는 stylesheet이다 라고 정의해준다. 뒤에서 연결되는 mystyle.css가 이 파일의 스타일 시트, 즉 css 파일을 불러오는 것이라고 설명해주는 것이다.
- href는 hypertext reference 의 줄임말로 레퍼런스, 즉 참조해서 하이퍼텍스트로 쓰겠다는 말이다. 여기서는 mystyle.css를 가져와서(링크) 사용하겠다는 뜻으로 이해하면 된다.
자! 이제 .css 파일을 잘 연결해준다면 간단하게 스타일이 적용된다.
3. 마진의 중요성
마진, 남는 것.
여백을 의미한다.
갑자기 마진은 왜 이야기하는 것일까?
아래의 사진을 확인해보자.
기본적으로 HTML 문서를 출력하면 일정한 여백이 잡혀있다.
이것이 데스크탑으로 보면 그렇게 크게 거슬리지 않는데 이 화면을 핸드폰으로 띄우면 문제가 달라진다.
여백이 생각보다 어마어마한 것.
그래서 꼭 제목줄이나, 필요한 곳에는 여백을 0으로 만들어주는 작업을 한다.
나는 위의 코드에서 <body> 부분의 여백을 모두 0으로 만들어줄거다.
여백을 없애는 코드는 margin, padding이 있는데 순서대로 바깥여백과 안쪽여백을 조절하는 코드이다.
위쪽 방향부터 시계방향으로 위, 오른쪽, 아래, 왼쪽의 여백을 각자 바꿀 수도 있고, 한 숫자만 입력하여 통일하여 조정할 수도 있다.
아래의 코드를 봐보자.
body {
background-color: yellow;
margin: 0; /*바깥쪽 여백, 위부터 시계방향으로 각각 주고 싶은 여백의 양을 적으면 된다.*/
padding: 0; /*안쪽 여백*/
}
나는 body 항목의 스타일을 배경색은 노랑, 여백은 바깥과 안쪽 모두 0으로 만들었다.
그리고 나서 출력하면 다음과 같은 화면이 출력되었다.
여백이 사라졌다!
이런 식으로 웹 접근성과 호환성 모두를 고려하며 스타일을 적용하는 것도 개발자라면 염두에 두어야 한다.
4. ID와 Class로 적용시키기
Internal CSS 처럼 여기서도 id와 class에 스타일을 적용할 수 있다.
방법도 마찬가지이다.
다만 별도의 파일에 저장되는 것일 뿐이다.
아래의 사진을 봐보자.
mystyle.css 파일에
line 이라는 class에 적용시킬 스타일과
mylayer 라는 id에 적용시킬 스타일을 코딩해주었다.
그리고 04.externalCSS.html 문서에 스타일이 적용되어있다.
화면으로 출력하면 어떻게 될까?
모두 잘 적용된 것을 볼 수 있다.
텍스트 에어리어에 글을 써도 글씨체 스타일이 그대로 적용된다.
'⁂ CSS > : 기본 익히기' 카테고리의 다른 글
| [CSS] #2-3 Reset(리셋) (0) | 2022.08.01 |
|---|---|
| [CSS] #2-2 고급 선별자 사용해보기 (0) | 2022.08.01 |
| [CSS] #2-1 다양한 선별자, 부모-자식 관계 (0) | 2022.07.29 |
| [CSS] #1-2 Internal CSS (0) | 2022.07.29 |
| [CSS] #1-1 CSS 이해하기 그리고 Inline CSS (0) | 2022.07.29 |