조반짝의 도전일지

html 마크업 css 편집_contents css 편집_nav ●.each: 선택한 요소가 여러개일 때 반복적으로 함수를 실행해주는 메서드 header 높이값 if문을 이용하여 nav 액션주기 처음에는 nav가 밑에 있고 스크롤을 내리면 nav가 위로 올라가는 액션이다. this 는 nav 이다. JHH's Website menu1 menu2 menu3 menu4 menu5 menu6 열심히 합시다. 졸지 마시고 자십시오 무슨 일 이든 안되면 반복하세요 오늘 비가 너무 많이 오네요 평양냉면 먹고싶다. 돈 많은 백수가 됐으면 좋겠다. @charset "utf-8"; *{ padding: 0; margin: 0; box-sizing: border-box; color: #222; } li{ list-styl..

html 마크업 #wrap article css 편집 자바스크립트로 박스안에 아쿠아색 클릭했을 때 핑크로 변경하기 변수 지정 아쿠아를 클릭하면 핑크로 변경된다. addClass = classList >> 클래스를 추가한다. click하면 "on"이 발생하도록한다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); }); 클래스가 없기 때문에 false가 뜬다. wrap.addEventListener("click",()=>{ wrap.classList.add("on"); let isOn = wrap.classList.contains("on"); console.log(isOn); }); 클래스를 추가하면 true가 된다. if문을 이용해서 자바스크..

01 자식 요소의 순서를 지정하자 html 마크업 css편집 ●order: 나열되어있는 자식들에게 order로 순서값을 변경해 줄 수 있다. 1 2 3 02 요소의 안쪽 여백 확대하기 ●flex-grow:1; 모든 article이 똑같은 사이즈로 넓이값이 지정됨 article 중 하나만 2를 넣었을 때 ●flex-grow:2; FLEX GROW_1 FLEX GROW_2 FLEX GROW_3 03 요소의 안쪽 여백을 축소하기 ●flex-shrink: 여백을 축소한다. FLEX shrink FLEX shrink FLEX shrink

html 마크업 css 편집 사이드 메뉴 스타일 지정 open 버튼 만들기 클릭이벤트 액티브 이벤트 open 단추 활성화하기 사이드 네비게이션 숨겨져 있을 때 open 버튼 클릭하면 나타나게 하기 open 클래스와 nav가 만나게 해야한다. 스르륵 open 되기 위해서 시간을 더해주면 된다. 하지만 .css 는 open만 되고 닫히지 않는다. .toggleClass("Open"); 을 한다. 만약에 open이라는 클래스를 갖고 있을 때와 안 갖고 있을 때 if문 : 모든 조건을 다 수용할 수 있다. ● hasClass("open"): 가지고 있으면 참, 그렇지 않으면 거짓 >> 유무에 따라 참, 거짓을 구별하는 메서드 ●text("Close") : 원래 값은 지우고 "Close"로 대치하라는 메서드 We..

.column col6 편집 html 마크업 css 편집_col6-gallery h4 , btn 편집하기 hover 시 이미지 색상 변경 gallery_img 편집하기 이미지 width 100%로 하여 박스안에 비율 맞추기 이미지 li의 레이어 순서를 정해주기 위해 position: absolute 하고 z-index로 레이어 순서를 정해준다. 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 로그인 가입 CONTACT US ENGLISH 하이미디어 구로캠퍼스 자바기반 풀스택 웹개발자3 icon1 icon2 icon3 icon4 전체메뉴 HTML5 html1 html2 html3 html4 html5 html6 html7 html8 html9 html10 CSS3 css1 css2 css3 c..

패럴럭스에서 했던 코딩파일에 이어서 작업한다. #nav 밑에 mNav 클래스를 만들어준다. css 편집 .mNav를 포지션을 띄워줘야 원하는 자리에 위치시킬 수 있다. 백그라운드 컬러와 너비 높이값으로 영역 잡기 top, right로 위치 잡기 햄버거 바 만들기 가상요소로 햄버거 바 2개 더 만들기 전체화면에는 메뉴가 있기 때문에 햄버거바는 없어야한다. 미디어 쿼리 화면너비 W 960px이 되면 햄버거 메뉴가 나오게 하기 display:none 을 다시 살리면 메뉴가 안보인다. 햄버거 메뉴 클릭했을 때 메뉴 슬라이드로 나오게하기 HI menu1 menu2 menu3 menu4 menu5 menu6 안녕하세요 챠오 곰방와 나마스테 사와디캅 샬롬 @charset "utf-8"; *{ padding: 0; m..

html 골격 만들기 nav 생성 contents thml생성 css 편집 편집할 태그 셋팅하기 #nav 픽스하기 position : fixed; 그라디언트로 각 페이지에 배경색 채우기 #nav 편집 float을 위치잡기 menu 위치 편집 li 가 블럭 구조이기 때문에 옆으로 나열하기 위해 inlne 구조로 변경해주고 a태그는 인라인구조와 블럭구조 성격을 가질 수 있도록 inline-block 구조로 변경한다. active 시에 글자색이 변경되도록 글자색 변경한다. h2 편집 패럴럭스 이벤트 생성 active 시에 글자색이 변경되도록 글자색 변경되는 이벤트 쿨또 menu1 menu2 menu3 menu4 menu5 menu6 Time is gold Seeing is believing Asking cos..

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안에 내용..

menu1을 클릭했을 때 section1이 나올 수 있도록 링크를 걸어준다. 나머지 section 내용 넣어주기 css reset 넣어주기 css 편집 셋팅 #contents 편집 ●background: radial-gradient (ellipse farthest-corner at center center, 색상코드 영역(0%), 색상코드 100%) 멀리있는 코너부터 서서히 바꾸어줘라 나머지 #section 도 백그라운 그라데이션 넣어주기 #nav 편집 ● position: fixed; nav 고정시키기 패럴럭스 J-Query 이용해서 script 넣어주기 꼭지점(offset) 찾기 메뉴를 클릭하면 해당 section으로 창이 뜬다.

레이아웃 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..