웹 프로그래밍(풀스택-->java)/웹프로그래밍(프론트엔드-->java)10 10. 마우스 오버효과2 1. margin-top margin-top과 top의 차이는 margin-top은 그 블록을 영역을 늘리는 것이다.(전체비율도 같이 늘어난다.) 2. top: Top 속성은 static position을 제외한 이외의 position의 각 옵션 속성들의 부모 태그를 기준으로 수직으로 위치를 조정할 수 있게 해주는 속성이다. top에 주어지는 값에 따른 각 자식 태그들의 수직이동을 살펴보도록 하자. 3. float: left 난 float:left가 display:block일 떄만 적용이 되는 줄 알았지만, 그게 아니었다. .notice hover2 ul{overflow:hidden;} .notice_hover2 li{float:left; width:93px;} li는 inline인 데도 해당이 되더라... 2021. 12. 26. 9. 게시판 1/게시판 2 1. display:block의 쓰임새 block은 영역을차지한다. inline은 영역을 차지하지 않는다. 2. text-overflow text-overflow는 white-space를 이용해 줄 바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 것인지를 처리하는 속성 속성 설명 clip 넘치는 텍스트를 자름 ellipsis 말 줄임표로 잘린 텍스트가 있다고 표시 text-overflow 속성은 overflow 속성이 hidden,scroll,auto 이면서 white-space:nowrap 일 경우 일때만 적용됨 2021. 12. 20. 8. 전체 배너/컨텐츠 레이아웃 1. text-align 의 쓰임법 더보기 .ban ul{overflow: hidden;} .ban ul li{float:left;width:330px;} .ban ul li:last-child{text-align: right;} .ban ul li:nth-child(2){text-align:center;} -->text-align은 인라인 구조에만 쓰인다. 2. position:absolute, top:0,left:0을 쓰면 영역이 사라진다. --> 오늘은 빨리 끝났다..~ 야호! 2021. 12. 18. 7. 전체 타이틀 1. class와 id는 대부분 div태그나 블록태그에 쓰지, a태그같은 인라인 에는 대부분 잘 쓰지 않고 직접 style.css에서 a태그를 직접 작성하여 이용한다..!(중요!!! 기억!!!) 2. 포지션 position:absolute .tit .btn{position:absolute; /*말 그대로 절대적인 위치로 이동이 가능하지만, 영역을 차지하지 않는다는 것! */ } absolute relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 조상을 기준으로 움직입니다. 만약 조상 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다 3. .. 2021. 12. 15. 이전 1 2 3 다음 반응형