css 스타일 주기

style.css 링크를 걸어서 효과를 주기도 하지만 그냥 헤드 밑 마지막에 <style>을 줘서

그 사이에 h1이면 h1{color : red;} 이런식으로 효과를 넣어줘도 된다

 

모든 영역들의 이름이 div로  지어져 개별적으로 효과를 주기 어렵다면

<div class="title">이런식으로 각각의 영역에 이름을 지어주고

 

스타일 박스 사이에 .title{효과}이런식으로 효과를 부여할 수 있다

 

line-height는 줄간격인데 라인헤이트를 단위 없이 1로 준다는 것은 폰트 크기에 알맞는 줄간격을 

자동으로 설정해준다 그러니 대부분 단위 없이 1을 쓰는 경우가 많다

body같은 큰 태그에 효과를 줄 때는 앞에 .을 붙이지 말고 효과를 줘야 된다

음 다시보니까 p 같은 것에도 .을 붙이지 않는다 이부분도 애매하다..

 

바디태그에

family-font(모든 폰트를 일치)

background-color(배경색)

color(폰트 컬러 사실 font-color이런식으로 쓰는 줄 알았는데 이 부분은 좀 애매,,;;)

 

아그리고 id로 지정해놓은 것은 . 대신에 #을 쓰고 이름을 적고 스타일을 줘야한다

 

원을 그리고 싶다면 일단 박스를 그리고 border-radius 값을 50%로 해주면 박스가 원으로 변환된다

 

음 그런데 원 세개를 circle이라는 이름으로 통일을 하니 하나하나 수정을 하는 방법을 모르겠다

그럴땐 nth-child를 사용하자

 

ex) 스타일 박스안에 .circle:nth-child()를 입력해주자 가로안에는 원하는 순서의 숫자를 기입해주고

{}박스를 뒤에 적어서 속성값을 넣어주면 개별로 작업이 가능하다 :)

.circle:nth-child(1) {

        background-color: transparent;

        border: 1px solid black; 보더는 기본적으로 테두리 라인을 말한다

        opacity: 0.2; 오퍼시티 값으로 투명도를 조정해 줄 수 있따

        box-sizing:border-box;

백그라운드 컬러에 transparent를 적어주면 투명값이 주어진다

 

box-sizing:border-box; 라는 기능에 주목하길 바란다 보더라는 것은 일러스트의 스트로크 처럼

두깨가 커질수록 바깥으로 나가는 성질이 있는데 박스사이징 보더 박스라는 속성을 추가하면

선이 안쪽으로 두꺼워 진다 

 

내일은 포지션에 대해 알아봐야겠다 사실 전에도 배운적이 있지만 생소한 코드 언어라

반복적인 학습이 불가피 할 것 같다 ㅎㅎ

 

비약적인 성과에 목매지말고 어제보다 나은 오늘을 만드는 것에 초점을 두고 폭발적이진 않지만

꾸준한 성과를 내려고 노력하자 언젠간 원하는 모습에 도달할 수 있을 것이다 화이팅!