조반짝의 도전일지

Notice 3 만들기 column col2 편집 css 편집 .notice3 이미지 사이즈와 li 위치 잡아주기 li에 패딩값을 주어 위치를 잡아준다. (좌표값을 계산해서 잡아주어야한다.) a, span 태그가 인라인 구조여서 한 줄로 나열이 된다. 줄이 떨어지기 위해서 블럭구조로 바꾸어 행이 바뀌도록한다. html에 더보기 넣기 a태그로 더보기 만들어주기 더보기 css 위치 잡기 더보기 a태그 블럭구조로 변경해주고 크기를 지정 백그라운드 이미지 백그라운 포지션을 넣어 이미지를 배치해준다. clumn col5 편집 제목 써주고 ir_su로 글씨 감추어주기 탭메뉴 만들기 ul > li 로 목록 만들고 li 중 한개 의 li 에 class= "active" 를 지정해준다. 공지사항1 ul > li안에 내용..

레이아웃 01 ●header태그: 헤더는 로고와 네비가 포함된 영역 ●aside태그: css편집 바탕색은 body에서 주면된다. ●aside, section 이 float으로 띄워져 있기때문에 footer가 aside, section 밑으로 겹쳐서 들어가게된다. footer 영역에 clear:both를 주어 aside, section영역 바로 아래에 위치된다. ●반응형 @media 영역 화면너비 0~1200px 화면 너비에 따라서 화면 스타일이 다르게 나오게 된다. 화면의 크기에 따라 스타일을 따로 준다. #wrap 너비값으 100%는 wrap이 꽉 차지만 95%는 양쪽 여백이 나온다. wrap이 1200px 이기 때문에 최대크기를 1200px를 하면 충돌이 날 수 있다. 그래서 좀더 큰 크기인 1220..

01 자식 요소의 배치방법을 지정하기 컨텐츠에 flex를 사용하면 편리하게 사용할 수 있다. html 골격 css 편집 section, article > 영역잡아주기 article 옆으로 flex를 이용해서 정렬하기 display: flex; >> 옆으로 나열 display: iline-flex; - in-line 구조 dispaly: flex; - block 구조 flext-direction: column; 세로로 자식을 정렬 flext-direction: 가로로 자식을 정렬 display: flex; align-item: center; justify-content: center article 안 요소 가운데 정렬 flext-direction: column-reverse; 세로로 자식을 반대로정렬 fl..

cont_cont 영역 column col4 편집하기 css 편집하기 마우스오버 효과 주기 span에 display:block하고 overflow:hidden을 해야 em이 안보인다. strong태그 가운데 정렬하기 .hover2 편집하기 .hover4 css 편집하기 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 로그인 가입 CONTACT US ENGLISH 하이미디어 구로캠퍼스 자바기반 풀스택 웹개발자3 icon1 icon2 icon3 icon4 전체메뉴 HTML5 html1 html2 html3 html4 html5 html6 html7 html8 html9 html10 CSS3 css1 css2 css3 css4 css5 css6 css7 css8 css9 css10 css11 cs..

컨텐츠 6개의 칸을 만들어서 바깥테두리 없이 레이아웃 진행 html 골격만들어주기 css 편집 표 위치와 영역 잡아주기 세번째 표의 보더를 없애주어야한다. .col3 오른쪽 위 끝 위치해야하기 때문에 보더, 패딩, 마진을 0으로 해주어야 올라간다. .col6도 똑같이 넣어준다. 각 표마다 아이콘 이미지 적용 img 에 아이콘 이미지를 적용했을 때 똑같은 이미지가 들어간다. .cont .colum .ico img > .cont .col1 .ico_img 부터 각각 이미지의 좌표를 지정해주면 다르게 이미지를 적용할 수 있다. 마우스 오버시 다른 이미지가 나오도록 한다. html 에서 각 col1 에 ir_pm을 적용하여 글씨를 없애준다. 다른 표에도 아이콘을 다르게 적용한다. .ico_tit 와 ico_de..

●input 태그 -text -password -date - color -checkbox : 체크박스는 중복으로 체크를 할 수 있다. -radio : 중복없이 선택함 -button ●placeholder: 박스 안에 텍스트 넣기 -테두리 만들기 border:0; 하면 input이 가지고 있는 테두리가 사라짐 하지만 input을 클릭하면 테두리가 나타남 ●outline: none 으로 클릭하면 나타나는 테두리 없애주기 -button 수정해주기 검색창과 검색버튼 위치 시켜주기 float: left / right 해주고 clearfix 해주는 대신 div에 overflow:hidden 해준다. 검색 [span으로 골격만들어서 검색창만들기] type, class, name 을 지정해 준다. -span 편집 : ..

바탕 이미지 고정시키기 ● background-attachment: fixed >> 큰 이미지를 사용해야한다. 웹표준 MENU [토탈 네비게이션 만들기] meta 설명 넣어주기 >> 웹페이지의 상세설명 viewport가 있어야 반응형이 적용이 된다. html 골격만들기 [skip 네비게이션] 아이디 컨텐츠 안에 섹션으로 나눠서 창을 100%사용할 수 있도록 한다. #wrap > #header, #footer > .container >.header, .footer #wrap > #contets > .cont_nav , .cont_tit, .cont_ban, .cont_cont > .container > .tit , .ban, .cont css 편집하기 아이디 먼저 넣어주고 각 아이디 안에 자식 넣어준다. ..

페이드 인 & 페이드 아웃 html 골격 만들어주기 css 편집 각 태그별 영역 잡아주기 html > 배너 이미지 넣기 ul에 class="list" class 를 지정해줘야한다. li에 class="list_img"를 지정해준다. css > banner 편집 슬라이드 배너 3장 한 위치에 겹쳐주기 fadeout / fadein 효과 주기 이미지슬라이드 효과주기 @charset "utf-8"; *{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } a{ text-decoration: none; color: #222; } .clearfix::after, .clearfix::before{ content: ""; display: ..

웹표준 ▶ reset. css * { } = 전체 적용됨 .mt10 은 margin-top 10 자동으로 전체 들어감. !important → 우선순위로 적용이 됨 >> reset.css 를 미리 만들어 놓고 사용하면 편리함. reset.css 를 제일 첫번째로 링크해야함. 순서를 반드시 지켜야함! ●meta 태그 : 웹페이지에대한 설명 웹폰트 적용 반드시 웹폰트를 사용해야한다. link - html에 적용 import - css 에 적용 html 골격만들기 **컨테이너를 넣는 이유 똑같은 컨테이너를 반복해서 각 영역에 넣는 이유는 각 영역의 양쪽 부분을 따로 따로 사용하기 위해서!!! css 편집하기 각 태그의 영역을 잡아준다 html 에 .container 를 각 아이디에 넣어준다. css에서 .co..

박스 3개 만들기 #wrap > .container > .box > .clock / p-clock 박스 영역 잡아주기 ● display: inline-block 인라인에는 본인 가지고 있는 여백이 있기 때문에 인라인블록을 해도 옆으로 나열되지 않음 이런 경우에는 float으로 옆으로 나열해준다. ● float을 띄우면 부모가 높이를 잃게 된다. >> 부모에 clearfix 나 overflow: hidden을 적용해준다. 박스를 개별로 수정해주기 .box:nth-child(1){} / .box:nth-child(2){} .... >> 하지만 박스 갯수가 많아지게 되면 각각 수정하기 시간이 오래걸린다. 박스를 짝수, 홀수로 수정해주기 짝수 .box:nth-of-type(2n){} 홀수 .box:nth-of-..