-
block
옆에 다른 요소를 붙여 넣을 수 없음
항상 새 줄에서 시작하며, 좌우로 최대한 늘어남
css를 통해 성질을 바꿀수 있음
< header>, < footer>, < p>, < li>, < table>, < div>, < h1>등 -
inline
요소끼리 서로 한 줄에, 바로 옆에 위치 할 수 있음
딱 텍스트만큼의 영역만 차지
< span>, < a>, < img>등 -
inline 성질을 갖도록 하는 css property
해당 property에 값을 부여하면 inline 성질로 변하게 됨
display, float -
반대로 원래 inline 성질인 태그를 block 으로 바꿀 수 있다
span{
display: block;
} -
display:none 으로 화면에서 숨길 수 있다.
이와 같은 요소를 사용 하는 여러 이유중 하나는 interactive한 웹을 구현 할 수 있기 때문이다.
정말 많이 쓰이는 기법이다 -
margin
1개 값이 있을 때는 사방모두 같은 margin을 줌
2개 값이 있을 때는 위,아래/ 왼,오
4개 값이 있을 때는 위/오/아래/왼
가운데정렬 margin:auto -
목록은 항상 ul이나 ol태그로 감싸야 한다
list-style: none 으로 리스트원을 삭제할 수 있다 -
원하지 않는 스타일이 디폴트 값때문에 생겼다면 해당 태그에 스타일을 덮어씌어서 디폴트값을 없애야 한다
-
selector:first-child{}
selector:last-child{}
selector:nth-child(odd){} 홀수
selector:nth-child(even){} 짝수 -
< textarea> input보다 더 긴 텍스트를 입력받고 싶을때 사용
보통 짧은 방명록이나 댓글을 입력할때 사용
default style : resize -
(가상요소)요소를 selector할때 콜론을 두개 붙인다
input::placeholder{} -
input이 세개인 상태에서 text 타입인 input만 스타일을 입힐때
input[type="text"]{} -
input이 세개인 상태에서 text 타입인 input 밑에있는 요소에 스타일을 입힐때
input[type="text"]::placeholder {
color: red;
}
input type 종류
- text : 주로 사용됨
- password : 패스워드 형태로 나타남
- number : 숫자만 입력가능
- placeholder : 도움말을 넣어주는 부분
-
opacity 는 해당 요소를 불투명하게 만들어줍니다.
0.8이라는 값은 백분율인데,
원래의 스타일에서 80% 만큼 흐리게 해준다는 뜻입니다.
만약 opacity에 0값을 입력하면 해당요소가 0%만큼 흐려져서
화면에서 아예 보이지 않게 됩니다. -
position: relative; 자체로는 특별한 의미가 없습니다.
딱히 어느 위치로 이동 하지는 않습니다.
위치를 이동시켜주는 top, right, bottom, left 프로퍼티가 있어야 원래의 위치에서 이동할 수 있습니다.
top, right, bottom, left 는 position이라는 프로퍼티가 있을 때만 적용되는 프로퍼티 입니다. -
flex
가로정렬에 유용하다
가운데정렬 justify-content:center;
div 각각사이 마진을 똑같이 하기 justify-content:space-around;
양쪽 끝 제외하고 div 마진 같게하기 justify-content:space-between;
