네 번째 날이다.
웹페이지 기본 구성
오늘은 웹페이를 구성한느 방식을 배우는 것으로 시작한다.
이건 예전 방식인데 div를 감싸서 id나 class에 정체성을 주는 방식이다.
요즘은 div로 하나하나 감싸고 id를 하나하나 입력해야하는게 귀찮아서 아예 id값을 태그로 만들어버렸다.
이렇게 함으로 id를 따로 만들 필요도 없고 css에서도 태그선택자만 입력하면 된다.
속성 선택자
태그의 속성값을 선택해서 디자인을 해 줄수 있는 css 기술이다.
일반 선택자와의 차이는 대괄호를 넣어줘야한다.
후손 선택자
css에서 선택자를 사용할때 어떤 부모태그 안의 특정 태그만 선택하고 싶을 때 사용할 수 있다.
다른 부모태그의 같은 태그는 선택이 안된다.
방법은 그림과 같다.
부모 id 자식 태그
공백을 주의해야한다.
태그선택해도 되고 id나 클래스를 선택해도 된다.
부모태그 자식 태그
부모태그 자식 id
자식 선택자
후손 선택자의 한 종류로, 부모 선택자 바로 아래 자식선택자만 선택하는 것이다.
두개다 header태그의 후손 태그이지만 바로 밑 h1태그인 Loremipsum만 빨갛게 된 것을 확인 할 수있다. (나비는 손자태그)
반응 선택자
이건 조건에 따라 서식이 변하는 선택자이다.
태그나 id등을 선택하고 : 을 한 뒤 여러 조건들을 입력해주면 된다. 참고로 hover는 마우스가 올라갔을때 효과를 지정하는 것이다.
이 말고도 다른 효과들은 필요할때 검색을 하면 된다고 생각한다.
상태 속성
이건 css가 아니고 htme에 넣어주는 속성인데 태그의 상태를 설정하는 속성이다.
그림과 같이 속성에 넣어주면 된다. disabled는 사용을 못하게 막는 기능인데 여러 기능이 있으니 이것도 필요할때 찾아 쓰자.
구조 선택자
수식을 이용해서 규칙적인 서식을 부여할 수 있다.
방법은 그림과 같이 : nth-child()로 넣으면 되고 괄호안에 수식을 넣으면 된다.
결과
박스 만드는 법
박스는 div태그를 만들어서 css로 속성을 넣어주는 방식으로 만들 수 있다.
여기서 여러 속성들이 나오는데 처음보는 속성이 4개만 정리해보자
border : 선두께px 선스타일 선색깔
padding: 안쪽여백
margin: 바깥여백
패딩은 안쪽에 여백이 있지만 지금은 잘 보이지 않는다. 나중에 다른 예제로 다시 알아보자
padding
작성 방법은 크게 이렇게 두가지가 있다.
margin 속성도 위와 같다.
이렇게 쓰면 4개 선택자에 다 적용된다.
오늘은 그닥 막히는 부분이 없었다. 자바도 재밌는데 웹디자인도 해보니까 재밌는거 같기도 하고 아직 새발에 피지만 그래도 재밌게 할 수 있다는 것에 의의를 둔다.
