조반짝의 도전일지

.face3 html 마크업 .face3 css 편집 .pic에서 공통된 속성을 적용해주고 nth-of-type으로 각각 사진만 넣어준다. Co Company Android Apple Twitter Facebook YouTube Google What's New New n Articles What is Lorem Ipsum? Lorem: 텍스트 자동 완성 기능 Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, explicabo quia error perspiciatis eveniet deserunt assumenda corporis minima voluptas consequatur quibusdam consectetur quae numqua..

▶ 네비게이션을 닷메뉴 형태로 변경 html 마크업 css reset #contents css 편집 각 article 배경색 넣기 article 한번에 편집 #header css 편집 #dot - ul(menu) css 편집 fixed 시키고 위치 변경하기 .li css 편집 menu 1-6 글자 지우기 parallax 적용 script dot 클릭하면 해당페이지로 움직이게 하기 스크롤 좌표 알아보기 페이지별 dot이 활성화되면서 해당페이지로 이동한다. C's Web menu1 menu2 menu3 menu4 menu5 menu6 언어의 한계가 곧 자기세계의 한계다. 교육은 최상의 노후대비책이다. 용기란 공포를 1분 더 참는 것이다. 욕망은 이성의 지배하에 두어라 교육의 위대한 목표는 앎이 아니라 행동이..

스크롤 시 네비게이션 보이기 html 마크업 css reset css 편집 #nav nav position: absolute 띄워주기 nav를 숨겨놨다가 on을 만나면 나오게 되고 고정해줌 #contents @charset "utf-8"; *{ margin: 0; padding: 0; /* margin, padding 사이즈 반영이 안되서 높이, 너비값으로 직접 적용 */ box-sizing: border-box; color: #222; } li{ list-style: none; } a{ text-decoration: none; } .clearfix::before, .clearfix::after{ display: block; content: ""; clear: both; } #nav{ position: ..

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

html 골격잡아주기 body 안에 section태그로 박스 잡아주기 css에서 편집해주기 1. body에 화면 배경색과 크기를 잡아준다. 2. section 편집 : 박스를 만들어주고 section (작업할 영역)위치를 잡아준다. h1 태그로 제목 넣어주기 css 에서 h1 편집 position띄워서 위치를 잡아준다. 구글폰트에서 웹폰트 가져오기 h1에 font-family: .. 웹폰트를 가져온다. 폰트 명령어 간소화하기 ▼ font: 폰트크기 / 줄간격 '폰트종류' ; section 안에 article태그를 넣어준다. article에 class이름을 sky이라고 지정 article에 이미지를 넣어준다. css > article 편집해주기 이미지 sky, sun위치 잡아주기 각각 이미지에 positi..

피그마에서 이미지 600 x 600 px 사이즈로 만들어서 작업할 폴더에 export하기 css reset 셋팅하기 html 바디안에 section(카드부분)이 들어가야한다. css 에서 편집하기 body: 배경색 넣어주기 ! section 태그 박스 넣어주기 width : 340px 너비값 넣어주고 높이값은 안넣어준다. 하지만 padding 값을 넣어주면 너비값이 지정되어있기 때문에 높이값이 30+30 으로 되서 60px이 지정됨 margin : 50px auto; 는 박스를 가운데 정렬을 해준다. box-shadow: 10px 10px 30px rgba(0,0,0,0.1) > 그림자 투명도 지정해준다. html에 다시 돌아가서 섹션 안에 nav 태그 넣어주기 폰트어썸에서 bar 아이콘 복사해서 nav..

이미지 회전 효과 html 골격 만들어주기 #wrap .effect ho1 > figure > img = figcaption > h3 = p .effect ho2 > figure > img = figcaption > h3 = p css reset 넣어주기 이미지 사이즈 100% 로 넣어주고 ho1 사이즈와 마진 넣어주기 이미지 양면으로 합쳐주기 피그캡션과 p 태그 수정 ho1- front , back 한번에 style 넣어주기 .front > figure 로 변경하면 한번에 스타일을 적용할 수 있다. 이미지 front 앞면 돌려주기 이미지 back 뒷면 돌려주기 ●backface-visibility : hidden; 뒷면 가려주기 html mosue hover 마우스 오버효과 앞면입니다. mosue ho..

html 내용 넣기 컨테이너는 각 아이디안에 들어가기 때문에 반드시 클래스로 넣어야한다. .container # wrap 안에 아이디 헤더 > 클래스 컨테이너 > 클래스 헤더 아이디 배너 > 클래스 컨테이너 > 클래스 배너 아이디 컨텐츠 > 클래스 컨테이너 > 클래스 컨텐츠 아이디 푸터 > 클래스 컨테이너 > 클래스푸터 바디 기본 틀 잡아주기 [css 기본 reset 코드 ] css 각 아이디별 영역 잡아주기 .container 에 background color 를 부모(아이디)의 높이값을 종속 받는다. [탭 메뉴 넣기] 탭 안에서 구분할 부분이 버튼이고, 보여지는 부분이 컨텐츠로 1번,2번 구분해서 숨기기 효과 사용한다. active: active 이름을 가진 클래스가 색깔이 다르게 들어갈 수 있음 c..

외부 css 사용시 html에 css 링크 꼭 걸어주기 * web font사용 시 light, normal, bold 가 다 있는 폰트를 사용해야 다양하게 사용할 수 있다. 박스 만들어주기 section으로 만들어주기 01 rotate : 회전 transform: rotate(45deg) transform: rotateX(45deg) transform: rotateY(45deg) CSS3 Transform rotate(45deg) rotateX(45deg) rotateY(45deg) @charset "utf-8"; *, *::after, *::before{ margin: 0; padding: 0; box-sizing: border-box; } body{ background-color: #f5f3f4; t..

concept(overview, color(주조색,보조색,강조색)) > logotype(텍스트, 아이콘), 로고설명, 로고 치수 > main font(영문,한글) 두께 > wire frame(골조), 레이아웃 TOOL: 피그마/포토샵/일러스트레이션 Reference > 회사의 웹페이지를 벤치마킹 웹페이지 주제정하기: 반응형X , 팀프로젝트(개발), 반응형 헤더(Header) 배너(Banner) 컨텐츠(Contents) 푸터(Footer) 비주얼 스튜디오 코드 _확장프로그램 Live Server 설치 extensions > live server 설치 live server : 미리보기 프로그램 하단에 Go Live라고 뜨면 실행가능한 상태이다. html 5 css: css3버전, 바디의 속성을 바꿔줌 *포토..