[html, css] css start . #2

오늘부터 개발자라는 책을 구매했다.
완전 따끈따끈하다
비전공자를 위한 개발자 취업 입문 개론이라며
쌀 도매업 하시던 사장님께서 개발자로 직종을 변경하면서 29살 나이에 시작하면서
나름 성공 썰? 성장하면서 좋았던점 주의하면 좋은 점들을 책을 만들어서
사자마자 집가는 길 버스에서 70페이지 정도 읽으면서 왔다
생각보다 술술 잘 읽혀서 이번 주말에 다 볼거같다.
필요한 부분 쏙쏙 보면서 열심히 공부해야지 파이팅 ~





#2
css

스타일 형식
css는

이렇게 코딩을 시작하면
body 영역에 html 골격을 써내려간다.
css는 <title>연습</title> 라고 적혀있는 부분
바로 밑줄부터 css를 시작할수가 있다.
<style>이라는 태그를 시작해서 css 스타일 형식을 작성한다.

css 스타일 형식
선택자 { 스타일 속성 : 속성값; }
예시 )
p { color : blur; font-size: 20px; }
풀이 )
p태그에 작성한 글자 색상 파란색, 폰트 사이즈 20폰트로 설정


내가 만든 예시

html 작성 body 안에 작성한다.

내가 설정해둔 css는 색상, 폰트 사이즈, 폰트 굵기 조절했다.
폰트 굵기는 bold 두껍게 / lighter 얇게 ( bold 자주 사용한다고 선생님께서 말해주심)

내가 설정한 css를 웹으로 보면 이렇게 보인다. (완전 초초초초 기초 )

dl 태그에 제목 dt / 설명 dd 넣었다.

여기서 중요한점이 있다.
먼저 dl 에 color 넣은 상태에 dt color 넣으면 어디가 우선일까
묶음인 dl 이라고 생각하겠지만 아래로 내려갈수록 우선이 된다 그러므로 dt 색상은 hotpink가 된다.
새로운 스타일을 소개해보면
1. width 가로 길이

200px로 설정해보면 글자가 공간이 부족해서 밑으로 내려가는 현상을 볼수가 있다.

width 값을 300px 로 설정한 상태의 웹이다.

2. border 태두리 이다.
border/border-top / border-right / border-bottom/ border-left
(1) border: 3px solid black
<태두리 : 3크기 실선 검은색 >

dd 영역에만 설정해놔서 현재 dd 에만 검으색 테두리가 있다 ( dt 에도 bottom에 설정해두긴함)

위에 사진으로 다시 보면 solid / dotted 등 있다
solid는 실선 / dotted 점선이다.

그래서 위에 css를 설정하면

이렇게 된다.

3. 마우스를 올리면 색깔이 바뀌게 하는것

hover

지금 작성해놓은 내용

마우스를 가져다 대면 dd는 글자 색상, 배경색깔 변경하도록 설정했다.
dt 역시 색상 변경을 했나 분홍색에서 보라색




아주 간단하지만
나중에 이미지 넣으면 하고싶은게 있다.
내가 요즘 좋아하는 드라마 테마로 사이트를 만들고싶다.
이힣


드라마 보러간다
오늘도 고생했고 나에게 멀리까지 책도 사고
월급받았다고 충동구매 없이 잘 왔다 ㅎㅎㅎ

모두들 파이팅하시고 행복하시길 ~