CSS

css는 html 이나 xml같은 마크업 언어로 작성된 문서의 스타일을 꾸미기 위한 시트 언어이다.

css는 주로 html 문서의 head안에서 style태그를 사용해 정의 하거나 외부 css파일을 연결하여 사용할 수 있다.

link요소에 href속성으로 css파일명을 입력하면 외부에 있는 css파일이 연결 된다.

link rel="stylesheet" href="styles.css"

rel

여기서 rel은 주로 링크 관계를 정의하는 속성이다.
웹 접근성 향상에 중요한 역할이다.

rel="stylesheet" > 외부 스타일시트 파일을 연결할 때 사용

rel="icon" > 웹사이트의 아이콘을 정의할 때 사용

ex ) link rel="icon" href="favicon.ico"

rel="alternate" > 사이트의 다른 버전을 지정하는 데 사용 (다국어 사이트에서 각 언어에 맞는 페이지를 링크할 때)

rel="author" > 페이지의 저자와 관련된 정보를 제공할 때 사용

ex ) a href="https://authorpage.com" rel="author" 저자 /a

선택자

선택자는 스타일을 적용할 대상을 지정한다.

기본 선택자

특정 HTML 태그를 선택한다.
예를 들어 h 태그 p 태그 등 모든 해당 태그에 스타일 적용.

Class 선택자 ( . )

여러 요소를 그룹화 해당 그룹에 스타일 적용
하나의 요소가 여러 클래스를 가질 수 있으며, 여러 요소가 동일한 클래스를 가질 수 있다.

id 선택자 ( # )

문서 내에서 유일한 식별자를 가진 요소를 선택
HTML 문서 전체에서 동일한 ID를 가지는 두 개 이상의 요소가 있으면 안 된다. ID는 유일성을 보장하기 위해 사용

주요 스타일 속성

• color: 텍스트 색상 지정
• background-color: 배경색 지정
• font-family: 글꼴 지정
• font-size: 글자 크기 지정
• margin, padding: 요소 주위의 여백 및 안쪽 여백 지정
• border: 테두리 지정
• width, height: 요소의 너비와 높이 지정
• display: 요소의 표시 방식 지정 (예: block, inline, flex 등)

실습 과제

첫번째 시도로 만든 코딩이다.
하이퍼링크의 밑줄 제거와 색상제거를 찾아보고
text-decoration 스타일 변경법을 none으로 바꾸었다
(여기서 장식 없음이 none이다.underline - 밑줄, line-through - 취소선)

하지만 적용 화면에서 색상만 적용이 되고 밑줄 제거가 들어가지 않는것을 확인.

정보를 찾아보니 하이퍼링크가 a요소 안에 있어서 style에 a요소를 추가해 따로 텍스트 데코레이션 설정을 해야 한다는 것이다.

그래서 style에 a요소를 추가해 텍데를 none으로 변경해주고 컬러도 inherit로 설정해 h1의 색상을 물려 받도록 했다.

잘 적용 된 화면이다.

그리고 할 일 목록의 글자에 아래마진을 10으로 설정하라고 되어있어서 margin-bottom 으로 10px 설정했다.

실습 도전하기는 전에 만들어 뒀던 표에 strong이 생각이 나서 쉽게 적용했다.

추가로 전 과제에 리스트 항목을 정하는 법을 몰라 그냥 알파벳으로 순서화 했는데 오늘은 li 로 (당연함 list임) 적용해주었다!

li class들은 과제(task)들로 묶어준 것이다.