CSS 226

CSS 요소 특수 상태 / 마우스 반응

마우스에 반응하는 요소의 특수 상태. 말이 참 어렵다. 공부하면서 가끔 느끼는데 말을 왜이리 어렵게 하나? 라고 느낄 때가 있다. 그러나 그 말을 다르게 표현할 방법은 나도 모르겠음. 그냥 마우스에 반응하는 요소? 정도로 해도 괜찮을 것 같다. 아~몰랑~ 마우스에 반응 한다하면 보통 글자색이나 배경색이 변하거나 뭔가 생겼다가 없어지고 이런거. a:link, visited, hover, active 마우스에 반응하는 요소중 대표적인게 a요소다. a는 링크요소다. ~ link : 링크가 걸린 내용(글)의 색. visited : 방문한 링크의 색. hover : 마우스가 올라갔을 때 링크의 색. active : 마우스를 클릭 했을 때 링크의 색. 참고로 각 태그는 쓰는 순서가 있다. link, visited,..

CSS 2019.12.23

CSS position: absolute; 절대 위치

position: absolute; 는 지난번에 배운 것 같은데? 배웠는지 확인해보니 배웠다. 까먹었네. 지난 글 좀 보고 왔다. 까먹은거 모르는 거다. 다시 한번 해보자. 2019/11/19 - [웹코딩 배우기/· CSS] - CSS position position: absolute; 이 태그는 절대적 위치를 지정한다. 절대적 위치를 지정하기 때문에 다른 요소와 겹치게 나온다. 그럼 z-index를 싸서 어느 요소가 위에 올지 설정하면 된다. 2019/09/17 - [웹코딩 배우기/· 태그 사전] - CSS 태그 : z-index

CSS 2019.12.16

CSS 레이아웃 가로 중앙 정렬

오랜만에 웹코딩 공부를 한다. 두근두근. 오늘 배운건 요소의 정렬 방법. 이건 스킨 편집하면서 몇 번 해봐서 조금 익숙하다. 그러나 공부하면서 모르는 부분이 이렇게 많았나 했다. 내가 아는 건 언제나 조금. div 가로 중앙 정렬 가로 중앙 정렬은 margin: auto; 를 쓰면 된다. 실습해보자. 위 실습 창의 CSS를 보면 text-aline: center; 가 있다. 이건 요소 안의 내용을 중앙 정렬하는 거다. 요소 자체 중앙 정렬과 요소 안의 내용을 중앙 정렬하는 건 잘 구별하자.

CSS 2019.12.06

CSS inline. inline-block. block 차이

display: inline; display: inline-block; display: block; 요소를 나열하는 방법이다. 쩌~~~ 번에 이에 관한 공부를 한적이 있다. 2019/10/15 - [웹코딩 어려워/· HTML] - HTML 블록과 인라인 HTML 블록과 인라인 요소의 표시 방법에는 블록 구조와 인라인 구조가 있다. 이 두 단어는 스킨 편집 할 때 몇 번 들어봤다. - 블록 구조 정의 : 항상 새 줄에서 시작하고 전체 너비를 사용한다. 블록 구조의 태그 address article a.. nilgi.tistory.com 한번 봐주고 다음으로 넘어가는게 좋겠다. 실시간으로 글을 막 쓰기에 보고 다시 글을 쓴다. inline은 가로 나열이다. 요소와 요소 사이에 공간이 없고 css를 보면 알 ..

CSS 2019.12.04

CSS float overflow: auto; 대체

저번에 float 배울때 영역안에 배치하는 태그로 overflow: auto;를 사용했다. 근데 현대사회(?) 태그에서는 이것보다 .clearfix::after { content: ""; clear: both; display: table; } 이렇게 쓴다고 한다. 더 어려운데... ㅠㅠ 그리고 난 아직 ::after 배운적 없는데...아... 답답하네 또. display: table도 써본적 없다.아... 진짜 짜증나네 또. 모르니까 일단 해보고만 넘어가자. 외우자. 모를 때는 무작정 외우는게 최고.

CSS 2019.11.29