css 다양한 선언

CSS
Cascading Style Sheet
<style></style>

1)In-Line 인라인 방식 : 태그에 style 속성명을 지정하고 속성값을 따옴표로 감싸서 스타일을 지정하는 방식으로 다른 방식과 함께 혼용했을 때에는 가장 강력하게 스타일을 덮어쓴다.
2)Internal 내부선언 방식 : html문서 안에 head 태그 안에 선언하는 방식으로 style태그 안에 선택자를 쓰고 스타일은 {} 안에 기술한다. 외부선언 방식과 함께 혼용하여 사용했을 때는 힘이 더 세서 스타일을 덮어쓴다.
3)External 외부선언 방식 : 파일을 따로 만들어서 스타일을 기술하는 방식으로 선택자{스타일을 기술} 파일명.css 확장자를 활용하여 파일을 생성하고 html안에 link 태그로 
확장자명은 .css이다. 장점: 스타일은 하나에 기술한 후 여러 페이지에 공통된 스타일을 사용할 수 있다. 해당 파일을 연결한다.

세가지 방식을 모두 사용해서 같은 선택자에 스타일을 다르게 주고 있다면 적용되는 우선순위는 인라인방식>내부선언방식>외부선언방식이다.

h1{color:red} = 선택자 selector {서술 description}

속성의 이름이 단어 두개일때 -(대시)를 많이 사용한다.

css를 공부할 때에는 다양한 선택자를 공부하게 된다. 내가 원하는 영역에 스타일을 주기 위해 태그 선택자를 사용할수도 있고 부모>자식을 선택하는 자식 선택자>를 사용할 수도 있고 부모 안의 자식이나 손주까지 모두 선택할 수 있는 자손 선택자(한칸 띄우기)를 사용할 수도 있고, 특별히 별칭을 주는 클래스 선택자나 아이디 선택자도 사용 가능하다.

다양한 속성명과 속성값
스타일의 종류는 다양하다. 스타일을 주기 위해서는 다양한 속성명과 속성값을 공부해야 한다. 배경색, 글자색, 블럭의 선을 주기 위한 방법으로 background-color, color, border: 1px solid red와 같은 스타일을 주는 다양한 속성명과 속성값을 공부하게 된다.

header h1{
    border : 1px solid red;
    }
border: 1px solid red;
width: 200px;
margin: 0 auto; 
컨텐츠 요소를 센터로 배치하고 싶을때
text-align: center;
텍스트를 센터로 정렬

id
수많은 태그 중 하나의 태그에만 특별한 스타일 속성을 부여하고 싶을 때 id를 부여; (#아이디명)

class
원하는 스타일을 다수의 태그에 동시에 부여하고 싶을때 class를 부여; (.클래스명)

margin의 수치 순은 시계방향으로 위 오른쪽 아래 왼쪽 순이다. auto를 값으로 지정하면 양쪽을 나누어 센터로 배치된다.

 

다중 선택을 위해서는 checkbox 속성을 이용하여 다중 선택이 가능하다. radio와 마찬가지로 name값을 맞춰줘야한다.

웹페이지의 왼쪽 상단에는 항상 로고가 있고 클릭을 하면 메인홈페이지로 이동을 하는 기능이 있다.
h1태그를 이용하여 제목으로 많이 정함