Cording/HTML & CSS21 [HTML / CSS] CSS Positioning 1. relative position "position" 속성 기본값 : static - 원래 있어야 할 위치에 있는 것 relative 값 : 주변 요소들을 밀어내지 않고 (margin은 주변요소를 밀어냄) static값 상태를 기준으로 요소위치가 변경 가능. 개인적으로 마우스 오버시 글자가 문단에서 입체적으로 튀어나오게 하는 효과를 줄 때 사용하고 싶음. 1. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 2. 남산 위에 저 소나무 철갑을 두른 듯 바람 서리 불변함은 우리 기상일세 무궁화 삼천리 화려 강산 대한 사람 대한으로 길이 보전하세 2. Fixed Position "relative"는 원래 위치 기준으로 위치 지정 -.. 2020. 1. 4. [HTML / CSS] 웹디자인 참고 사이트 7선 1. Behance Search개 프로젝트 | Behance의 사진, 비디오, 로고, 일러스트레이션 및 브랜딩 www.behance.net 2. Site Inspire http://www.siteinspire.com siteInspire - Web Design Inspiration www.siteinspire.com 3. Dribble http://dribbble.com Dribbble - Discover the World’s Top Designers & Creative Professionals Discover the world’s top designers & creatives Dribbble is the leading destination to find & showcase creative work an.. 2020. 1. 2. [HTML / CSS] CSS 세로정렬 (Vertical-Align ) 1. Vertical-Align inline 요소 혹은 inline-box요소의 경우 base line(밑줄) 에 따라 요소이 세로 정렬 상태 결정됨. verticla-align 속성은 기본적으로는 base-line 값으로 설정되어 있음. (부모 요소 기준 base-line) base-line은 각 요소의 vertical-align 속성 값을 충족하면서 줄의 높이가 최소가 될 수 있는 지점으로 이동함. vertical-align 속성은 inline 요소 혹은 inline-box 요소에만 적용 가능 (box 요소는 display를 inline 이나 inline-box로 변경해서 적용해줘야함.) 2. vertical-align 속성 외 세로 정렬 방법 플렉스 박스 속성을 사용한 정렬 방법 - 상세는 링크 참.. 2020. 1. 1. [HTML / CSS] Display 속성 1. display 종류 모든 요소는 딱 하나의 display 값을 갖음 (중복 불가) 대부분의 요소는 "inline" 혹은 "block" display 종류 inline block inline-block flex list-item none 2. inline display "inline" display를 기본값으로 갖는 요소들 "inline" display의 특징 앞뒤 텍스트와 같은 줄에 머무름 가로 길이는 필요한 만큼만 차지 width / height 설정이 되지 않는다. 내용에 맞게 자동 설정 3. block display "bolck" display를 기본값으로 갖는 요소들 ~ "block" display의 특징 앞뒤 요소와 다른 새로운 줄 생성 가로 길이를 최대한 많이 (기본 100%) 차지 wi.. 2019. 12. 31. 이전 1 2 3 4 5 6 다음
