⋆⁺₊⋆ ☾ ⋆⁺₊⋆

다음과 같은 드랍다운메뉴 만들기 *{margin : 0; padding : 0;} /* 맨 왼쪽위로 정렬 */ #a1{margin-left: 10px; margin-top: 10px;} /* 간격주기 */ list-style:none; /* 리스트 구분값 삭제 */ float: left; /* 왼쪽으로 나란히 정렬 */ li:nth-child(1) {border-left: 1px solid gray;} /* 특정순서를 조건에 맞게 변경 */ ul{overflow:hidden;} /* ul의 자식태그인 li가 10행에서 float속성을 가지므로 부모태그는 overflow:hidden을 가짐 */ 해당내용 참고 [HTML/CSS] float float : 블록요소의 객체를 왼쪽이나 오른쪽으로 나란히 정렬하기..

position 속성 static : 기본적인 위치 지정방식으로 문서의 기본적인 흐름을 따른다. 모든 태그들은 처음에 position : static 상태이다. left, right, top, bottom 값이 적용되지 않는다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. absolute : 기본 흐름을 따르지 않고 부모요소의 상대적 위치로 지정된다. 부모의 포지션이 relative, absolute, fixed인 태그가 있다면 부모요소의 기준으로 움직인다. 자식의 포지션이 absolute를 가지면 부모요소는 relative를 가진다. 부모요소의 포지션이 static이라면 body태그를 기준으로 배치된다. 부모요소가 없다면 문서의 body를 기준으로 배치된다. relative : static과 유사..

float : 블록요소의 객체를 왼쪽이나 오른쪽으로 나란히 정렬하기 위한 속성으로 부모영역에 영향을 받지 않고 공중에 떠오른 상태가 됨 **자식태그가 float 속성을 가지면 그 부모는 대부분 overflow : hidden을 가짐(감싸야하므로) overflow 참고 [HTML/CSS] overflow 오버플로우(overflow) : 내용이 초과되는 경우 처리 방법 overflow : hidden 👉지정된 영역을 넘어가면 그대로 잘라버림 overflow : scroll 👉내용이 적어도, 많아도 양과 관계없이 무조건 스크롤로 보여줌 studywithjw.tistory.com 자식태그가 float 속성을 가지면 그 부모는 대부분 overflow : hidden을 가짐(감싸야하므로) 자식태그가 float 속성..

p태그 박스 3개를 같은 위치에 겹쳐둔 상황에서 z-index를 이용하면 겹치는 순서를 지정할 수 있음 순서가 클수록 맨 앞으로, 순서가 작을수록 맨 뒤로 위치한다.

virtual class 가상클래스는 특정상황을 구별해주는 키워드로 콜론(:)을 쓴다. 앞서 마우스를 올렸을 때 발생하는 효과를 :hover로 사용했던 점 참고. :nth-child(조건) -> 특정순서를 조건에 맞게 변경할 때 사용한다. :first-child 처럼 바로 몇번째인지 알 수 있는 경우 뒤에 조건은 생략가능하다. 태그 안의 태그들에게 가상클래스를 적용할때 ul: 으로 쓰지 않도록 주의한다. ul: 이 아닌 li:

오버플로우(overflow) : 내용이 초과되는 경우 처리 방법 overflow : hidden 👉지정된 영역을 넘어가면 그대로 잘라버림 overflow : scroll 👉내용이 적어도, 많아도 양과 관계없이 무조건 스크롤로 보여줌 overflow : auto 👉내용이 많아 지정된 영역을 넘을 때만 스크롤로 보여줌 (내용이 적어 지정된 영역을 넘지 않으면 스크롤X) overflow : visible 👉지정된 영역을 넘어가도 무시하고 내용 모두 보여줌 scroll은 무조건 스크롤, auto는 필요시 스크롤인 점 참고!

list menu display : block; /* 글자수가 다르기때문에 영역을 통일하기 위해 블록요소로 만든다 */ 앞서 display는 인라인요소를 블럭요소로 변경하기 위해 사용하는 것으로 배웠는데 이와 같이 글자 수가 다른 영역의 통일성을 위해 쓸 수도 있다. :hover /* hover->마우스가 올라왔을때 일종의 이벤트처리 */ 콜론(:)이 붙으면 가상클래스로, hover는 마우스를 올릴때 처리할 효과를 위해 쓴다. 가상클래스 관련 추가내용 참고 [HTML/CSS] virtual class virtual class 가상클래스는 특정상황을 구별해주는 키워드로 콜론(:)을 쓴다. 앞서 마우스를 올렸을 때 발생하는 효과를 :hover로 사용했던 점 참고. :nth-child(조건) -> 특정순서를 ..

display : 인라인요소를 블럭요소로, 또는 블럭요소를 인라인요소로 변경하기 block : 한 영역을 차지하는 박스형태를 가지는 성질 block은 width와 height를 지정할 수 있다. margin과 padding을 지정할 수 있다. inline : 주로 텍스트를 주입할 때 사용되는 형태 영역이 컨텐츠의 양만큼 자동으로 잡힌다. width와 height를 명시할 수 없다. margin은 위아래엔 적용되지 않는다. inline-block : inline과 block의 특징을 모두 가진 요소 줄바꿈이 이루어지지 않음 block처럼 width와 height를 지정할 수 있다. 만약 너비와 높이를 지정하지 않을 경우 컨텐츠만큼만 영역이 잡힌다. , , 는 모두 인라인 요소로 줄바꿈 없이 옆으로 이어서 ..

자식선택자( > ) : 바로 아래 직계자식에게만 속성을 적용

padding (패딩) : 내용(content)과 테두리(border)사이의 간격을 설정해주는 속성 **padding을 사용하다보면 생각보다 크기가 커질 수 있는 점 유의 padding : 상하좌우 padding : 상하 좌우 padding : 상 좌우 하 padding : 상 우 하 좌 (시계방향) padding-방향 : 상하좌우 각각 다른 간격 가능 margin (마진) : 주변과 요소사이의 여백 **margin을 사용하다보면 생각보다 크기가 작아질 수 있는 점 유의 margin : 상하좌우 margin : 상하 좌우 margin : 상 좌우 하 margin : 상 우 하 좌 (시계방향) margin이 겹치는 경우 최대크기가 적용됨 ex. 30px과 50px이 겹치면 50px 적용 font(폰트) f..