본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _

전체 글57

float 속성(clear, overflow) float float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다. 이 속성은 본래 위와 같은 목적으로 만들어졌지만, 현재는 웹 페이지의 레이아웃(layout)을 작성할 때 자주 사용됩니다. ex) img { float: left; margin-right: 20px; } ex) html css div.page { border: 3px solid #CD5C5C; overflow: auto; } /가장 바깥을 overflow로 막음 h2 { text-align: center; } header{ border: 3px solid #FFD700; } nav { border: 3px ​​​​​​​solid #FF1493; width: 150px; float: left; } .. 2021. 4. 25.
position 속성(static, relative, fixed, absolute, z-index, clip ,cursor, overflow) position HTML 요소의 위치를 결정하는 방식을 설정함. 1. 정적 위치(static position) 지정 방식: position 속성값이 static으로 설정된 요소는 top, right, bottom, left 속성값에 영향을 받지 않습니다. 정적 위치(static position) 지정 방식은 단순히 웹 페이지의 흐름에 따라 차례대로 요소들을 위치시키는 방식입니다. ex) div { position: static; } 2. 상대 위치(relative position) 지정 방식: 상대 위치(relative position) 지정 방식은 해당 HTML 요소의 기본 위치를 기준으로 위치를 설정하는 방식입니다. HTML 요소의 기본 위치란 해당 요소가 정적 위치(static position) 지.. 2021. 4. 25.
display 속성 (block, inline, visibility, display, opacity ) block 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다. , , , , , 요소는 대표적인 블록(block) 요소입니다. inline 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다. 또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다. , , 요소는 대표적인 인라인(inline) 요소입니다. display display 속성의기본 설정값의 변경 display 속성값을 변경해도, 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아닙니다. 즉, display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 포함할 수 없습니다. .. 2021. 4. 25.
box model 속성 (content, padding, border, margin, outline) content 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분입니다. ex) div { background-color: red; padding: 50px; border: 20px solid maroon; margin: 50px; } padding 패딩(padding) : 내용과 테두리 사이의 간격입니다. 패딩은 눈에 보이지 않습니다. background-color 속성으로 설정하는 배경색의 영향을 함께 받습니다. 1. padding-top 2. padding-right 3. padding-bottom 4. padding-left ex) div.four { padding: 10px 20px 30px 40px;} = padding-top: 10px; padding-right: .. 2021. 4. 25.
Image Sprite 속성 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지를 의미합니다. 웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다. 이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다. .. 2021. 4. 24.
table 속성 border 모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있음. 이 속성을 명시하지 않으면 해당 테이블은 기본 설정으로 빈 테두리를 가지게 됨. 태그와 태그가 각각 자신만의 테두리를 가지고 있기 때문에 두줄로 나타남. ex) table, th, td { border: 2px solid orange; } border-collapse 테이블의 테두리를 한 줄로 나타낼지를 설정함. ex) table, th, td { border: 2px solid orange; } table { border-collapse: collapse; } border-spacing 테이블 요소(th, td)간의 여백을 설정함. ex) table, th, td { border: 1px solid black; } tabl.. 2021. 4. 24.

티스토리툴바