본문 바로가기

HTML-CSS

 (12)
States(상태) 1. active 마우스 커서로 버튼을 눌렀을때, 활성화 된 상태. 2. hover 마우스 커서를 버튼 위에 올려두었을때. 3. visited 특정 링크를 들어가거나 방문한적이 있다면 색이 바뀜.
Attribute selector 위와 같은 코드에서 특성을 콕 찝어서 selector로 사용할 수 있다. input[type="password"] { background-color:green; } 이런식 ㅋㅋ. 혹은 input[placeholder~="user"] { background-color:pink; } 이렇게하면 placeholder에 user이라는 단어가 포함되어있는 태그들에만 적용이 된다.
Pseudo selector 특정 태그를 조금더 자세하게 선택하고싶을때 사용한다. 원래는 세가지 방법이 있었다. 1. 태그의 이름 2. id의 이름(# 사용) 3. class의 이름(. 사용) 위와 같은 코드가 있을때, 마지막 div만을 지지고 볶고 싶다면 다음과 같이 한다. div:last-child { background-color: tomato; width:1000px; height:900px; } 원래 알던 방식의 selector을 쓰고 : column을 사용하여 특징을 추가하면 된다. 또 다른 방식으로는 부모-자식 관계를 이용하는 것이다. hello lkdajslkifdfkshfkjdhkjdhfkjhdfkjheebbbfdbibdibinside 이와 같은코드가 있을때, p안의 span만 색을 바꾸고 싶다면 p span { c..
Relative & Absolute 1. relative 위치를 조금씩 움직이고 싶을때 사용하는 것. position : relative; top: -10px; 과 같이 작성하면 해당 박스는 위로 10만큼 움직이게 된다. (4방향 모두 가능) 2. absolute 가장 가까운 relative한 부모를 기준으로 움직인다. 자신의 바로 윗 부모가 position:relative이면 그 해당 박스 내에서 움직일 수 있다. 하지만 어떠한 부모도 relative가 아니면, body를 기준으로 움직인다. left : 0px; 로 쓰면 맨왼쪽 벽에 붙어버린다.
Fixed 특정 박스가 스크롤해도 한자리에 계속 있게 하고 싶을때 사용한다. css코드에 position : fixed; 라고 작성하면 해당 박스는 초기의 위치에 고정되어, 스크롤해도 그자리에 남아있게 된다. 두개의 박스로 예를 들어보자. #one { width:100px; height:100px; background-color:green; } #two { width:100px; height:100px; position:fixed; background-color:wheat; } 현재 두 박스는 같은 layer에 위치하여 위아래로 붙어있는 상황이다. 밑에있는 흰색박스가 fixed되어 스크롤해도 원래의 위치를 유지하고 있다. 이때 #two에 top,bottom,right,left중 하나만 수정해도 두 박스는 다른 레이..
Flexbox 우리는 div와 같은 block들을 자주 사용하게 되는데 이는 옆에 다른 것이 올 수 없어서 웹페이지를 만듦에 있어서 굉장히 불편하다. 이를 해결 하기 위해 flexbox를 사용한다. (display : inline-block 이 있지만 굉장히 오래되고 별로인 것임;) flexbox를 사용할때에는 중요한 두가지의 규칙이 있다. 1. 자식 엘리먼트에는 flexbox에 대한 어떠한 것도 적지 않는다. 오직 부모 엘리먼트에만 적는다. 위와 같은 코드에서는 div가 전부 세로로 줄 서 있는 상태인데, 부모 엘리먼트인 body에 다음과 같이 적어주면 가로로 줄 세울수 있다. body { display: flex; } 2. main-axis & cross-axis flexbox를 사용하면서 justify-conte..
Classes Class는 특정 태그를 가리킬 수 있으면서도 id와 달리 겹쳐도 되는 방법이다. 여러 태그가 공유하여 사용 할 수 있다. Hi Hi Hi Hi Hi 위와같은 html코드가 있다고 해보자. 위의 코드는 두개의 span이 클래스를 공유중이다. 이럴때 css로 꾸미는 방법은 다음과 같다. .tomato { background-color : tomato; color: white; pading: 5px 10px; border-radius: 5px; } 클래스는 여러개를 연속으로 사용 할 수 있다. 위의 코드에서 class="button tomato" 라고 작성하면 button이라는 클래스와 tomato라는 클래스 두가지에 모두 들어 있는 것이다.
Margin, Padding, Border 1. margin margin은 box의 경계(border)의 바깥에 있는 공간이다. margin에 대하여 아무런 코드도 작성하지 않았다면, 브라우저가 알아서 디폴트값으로 margin을 설정한다. 따라서 원하는 값으로 설정하거나, 없애고싶다면 margin : 0px; 을 사용하면된다. margin에는 방향을 부여할 수가 있다. margin-left, margin-right, margin-top, margin-bottom. 하지만 margin : 20px 10px; 라고 쓰면 상하 20, 좌우 10의 공간이 생긴다. (수직, 수평 순서임) margin : 1px 2px 3px 4px; 은 시계방향으로 상, 우, 하, 좌로 공간이 생긴다. 2. padding padding은 box의 경계(border)로부터..

티스토리툴바