HTML+CSS (30) 썸네일형 리스트형 html/css #3 - 프로필 사이트 index 2 (class, descendant selector) 1. 레이아웃을 잡아준다. 큰 덩어리는 div 한개 2. background-color로 영역 확인 후 초기화 해준다. *margin 참고 margin: unset; 프로퍼티가 상속 지원 속성이면 -> inherit 프로퍼티가 상속 지원 안되는 속성이면 -> initial (명시적 초기화) unset이 알아서 해준다. 3. div 내에 header/contents/footer로 나눈다. 이 형태가 된다. 4. div에 클래스를 지정해주어야 한다. .header{} html/css #2-1 프로필 사이트 index *별첨 이미지 radius 편집 시 css border - radius generator 를 애용하자! https://9elements.github.io/fancy-border-radius/ Fancy Border Radius Generator Generator to build organic shapes with CSS3 border-radius 9elements.github.io 내 프로필 페이지 작성해보기 최종 코드 CHAEYOUNG RYU FRONT END DEVELOPER :root { font-family: 'arial'; } /*초기화*/ body{ margin:0; } h1, h2, h3, h4, h5, h6{ font-size: inherit; font-weight: inherit; mar.. html/css #2 - html/css 작성 순서 css 파일을 html 파일에 링크 연결 style 태그가 너무 길어지기 떄문에 css 파일을 링크로 연결한다. css 구성할때 순서 큰 틀에서 작은 커넨츠로 오는 것으로 구성해야한다. 1. 틀, 레이아웃 (덩어리 구조) 를 신경써야한다. 가장 큰 덩어리인 컨텐츠를 div로 묶어준다. 내부에 세부적인 디자인 및 컨텐츠는 가장 나중에 해줘야 한다. 2. 백그라운드 컬러 주기 background-color : ~~~ 3. 컨테이닝블럭 확인해서, 내가 설정하지 않은 부분 확인하여 초기화 f12 -> 검사 -> body 브라우저가 기본적으로 제공하는 margin이 있다. 해당 공간들을 확인 후 설정해주어야 한다. body{ margin : 0 } ㄴ 이 것을 통해 margin 0 으로 초기화 해주어야 한다. *.. html/css #1-1 cat 페이지 만들기 소스코드 CAT Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa 코드리뷰 head 태그 타이틀 태그, css를 입력할 style 태그 작성 (style 태그의 셀렉터별 설명은 하단) body 태그 div를 이용해 모든 컨텐츠를 하나로 묶어준다. img 태그에서 cat02.png 이미지 불러오기 h1 태그를 이용하여 제목 붙여주기 "CAT" p 태그를 이용하여 내용 텍스트 삽입하기 head태그 -> style태그 body 태그 : background-image 를 통해 배경 이미지 불러오기 h1태그 폰트 컬러 붉은색 border-bottom 을 통해 하단 밑줄 효과를 .. html/css #1- fruits 페이지 만들기 ㄴ 리빙 스텐다드 (최신 버전) Orange orange kiwi strawberry div{ background-color: white; width : auto; height : auto; } width : auto -> 상위요소의 컨텐츠만큼 차있음 height : auto -> div의 컨텐츠 만큼 차있음 margin-left : auto -> 사용가능한 왼편의 공간 확보 몰빵한다. margin-right: auto -> 사용가능한 오른편의 공간 확보 몰빵한다. ㄴ 두개를 같이 사용하면 공간을 균등하게 나눠갖는 것이기 때문에 컨텐츠를 중앙정렬할 수 있다. margin : 0 auto ㄴ 상, 하단은 0 좌,우는 auto로 좌우정렬 margin : 50 auto ㄴ 상, 하단은 50 좌,우는 aut.. html/css 정리하기 그림자 적용하기 box-shadow: 0(x의 이동) 1px(y축으로의 그림자 이동) 20px(흐림정도) 0(퍼짐도) rgba(0,0,0,0.1) ㄴ 마지막 rgba 의 a는 투명도 0.1 = 10% 구글폰트 적용하기 줄간 간격 속성 css Line-height : 16px; 한 줄에 두 태그를 정렬하고 싶을 때 float : left; (Awesome~) ㄴ 왼쪽으로 붙어서 맨 위쪽 (떠다녀라) float : right; (2020-Now) ㄴ 오른쪽으로 붙어서 맨 위쪽으로 (떠다녀라) float 사용 시 문자가 겹치는 일을 맊기 위해 두 태그들을 div 태그로 막아주고, 해당 div 속성에 overflow: hidden; 속성을 입혀준다. 이전 1 2 3 4 다음
