본문 바로가기

코딩 공부/CSS

CSS 예제들 배운 것을 활용한 페이지 구현 1. 인덱스 페이지 CARE LAB login register nav cafe mail webtoon section section footer | About Us | Recruitment | Partnership |Terms of service 2. 로그인 페이지 빠른 상담 예약 직접 방문하시면 효과적인 공부방법을 체계적으로 상담 해 드립니다. 상담일시 오전 10시 오전 11시 오후 2시 오후 3시 오후 4시 이름 성별 여 남 연락처 010 011 016 이메일 @ 궁금한 점 개인정보 수집 약관 동의서 Ⅰ. 개인정보의 수집 및 이용 동의서 - 이용자가 제공한 모든 정보는 다음의 목적을 위해 활용하며, 하기 목적 이외의 용도로는 사용되지 않습니다. ① 개인정보 수집 항목 및 .. 더보기
CSS Table table 1. table-layout 기본값이 auto다. - fixed table layout fixed예제 table layout fixed fixed : 내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다.내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다. 내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다. 내용 길이에 구애받지 않고 자동으로 조절되지 않고 고정된다. 2. border-collapse 테이블 보더 간의 간격 제거 표(table)의 테두리와 셀의 테두리 사이의 간격제거 table border-collapse table border-collapse table border-collapse 3. border-spacing 표(table)의 테두리와 셀의 테두리 사.. 더보기
CSS header session footer등의 구조 1. Webpage를 구성 할 때 화면을 이런식으로 나눌 수 있다. header article footer 더보기
CSS 예제 (clear, overflow, box-sizing) 1. clear.both; 양쪽 정렬 제거. float속성을 사용하면 요소를 정렬시켜주는데 그걸 하고 싶지 않은 경우 사용한다. .div1{ float: left; width: 100px; height:40px; margin:0px; border: 3px solid green; } .div2{ border: 1px solid red; height: 50px; } .div3{ clear: both;} float 속성 사용 div1 div2 float 속성을 사용하여 대상 요소를 웹 문서에 배치한다 다시한번 div1 clear를 통해서 초기화한다. 2. overflow 이미지가 박스영역을 벗어남 이미지가 오른쪽 정렬로 되어 있는데 박스영역을 벗어났다. 이미지가 박스영역을 벗어날 경우에는 overflow속성을.. 더보기
CSS 예제 (ul, li, border, margin, position) 1 - 1. 세로 리스트 Home Profile Board Contact 1-2 가로 리스트 (float 속성) Contact Board Profile Home 2. Border 속성 CSS3 박스 모델은 content,padding,border,margin으로 구성되어 있다. 박스모델의 padding, border, margin 속성의 기본값은 0이며, 상하좌우 네가지 방향을 top bottom left right 를 이용하여 지정할 수 있다. 3. Margin 박스모델의 네 방향 여백지정 mp1 mp2 mp3 기본 값 (4개일 경우): top, right, bottom, left 기본 값 (3개일 경우): top, right &amp bottom, left 기본 값 (2개일 경우): top &amp .. 더보기
CSS CSS *{ color : red; background-color : yellow; font-size:14px; font-weight:normal; } *는 모든곳에 적용(universal selecter) 태그별로 스타일 적용 h1{ background-color:yellow;} h2{ background-color:green;} p{ background-color:skyblue;} tag selector 서로다른 색상 태그별로 다른 스타일 적용 시 사용 tag를 지정해서 적용하기에 동일한 tag에 모두 적용 아이디별로 스타일 적용 #id{ background-color:yellow;} #id1{ background-color:green;} #id2{ background-color:skyblue;} t.. 더보기

티스토리툴바