웹11 [HTML] 웹 프로젝트 10일차! (클론 코딩 index.html) 카카오톡 클론 만들기 1일차! 로그인 화면 - index.html) +) 왜 이름을 index.html로 했는가? 왜냐하면! 대부분의 웹 서버가 디폴트로 index.html을 찾아보도록 설정되어 있기 때문이다. 영어로 index는 첫 번째를 뜻한다. html 코딩에 들어가기 앞써 어떤식으로 코딩을 해야하는지 구상부터 했다. 이런식으로 box부터 구상하고 차례차례 큰 것부터 잡은 후에 세부적인 box를 코딩해주었다. 큰 box들에는 div를 사용했고, 세부적인 요소들은 text에는 span을 이미지에는 i를 사용했다. 여기서 i는 font awesome에서 추가한 아이콘을 뜻한다. font awesome을 사용하면 아이콘 코드를 바로 복사-붙여넣기 후 사용할 수 있기 떄문에 무척 편하다. 그 대신 이 코드.. 2021. 7. 18. [CSS] 웹 프로젝트 9일차! (animation) 오늘은 여러 state 속성에 대해 공부했다. active, hover, focus, focus-within, visited ~~ 그리고 드디어.. 애니메이션 효과를 넣는 방법을 배웠다. state) - active -> 해당 요소를 마우스로 클릭했을 때 지정한 효과를 적용한다. - hover -> 마우스가 해당 요소 위를 지나갈 때 지정한 효과를 적용한다. - focus -> 키보드로 선택되었을 때 지정한 효과를 적용한다. - focus-within -> 부모 요소에게 적용하며, 자신의 자식 요소 중 하나가 focused 되었을 때 지정한 효과를 적용한다. - visited 링크를 걸어 두었을 때, 이미 방문한 사이트일 경우에 효과를 적용한다. 추가적으로 조건을 나열해 여러 상황을 설정할 수도 있다!!.. 2021. 7. 14. [CSS] 웹 프로그래밍 8일차! (position & pseuco selector) 오늘은 position 과 pseudo selector에 대해 공부했다. 우선 position에 대해 알아보자!! position) position은 요소의 위치를 지정하는 기준을 정하고 그에 맞추어 요소의 위치를 설정한다. 그렇다면 본격적으로 4가지 속성에 대해 알아봅시당!! - position : static ; (기준 없음) 모든 태그의 position 디폴트 값은 static으로 설정되어 있다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. - position : relative ; (요소 자신을 기준) 태그의 위치를 살짝 조정하고 싶을 때 사용한다. 이 코드를 사용함으로써 top(위) bottom(아래) left(왼쪽) right(오른쪽) 속성을 사용해 위치를 조정할 수 있다. * 주의할 점.. 2021. 7. 12. [CSS] 웹 프로젝트 6일차! (border & padding & flex) 오늘은 2일차 CSS의 box 특징 margin, border, padding 중 border 와 padding에 대해 공부해 보았다. padding) border의 안쪽 공간 = box의 경계 안쪽 padding: 20px; -> padding을 20px 해라 border) margin 과 padding의 경계선 = box의 경계 border: 2px solid black; -> border을 2px의 검은색 실선으로 해라 FLEX ) -> flex는 레이아웃 배치 전용 기능으로 고안되었다. 기존 방식의 inline-block보다 훨씬 편하고 강력하다!! 1 2 3 이런 코드가 있다고 할 때, flex선언은 부모 요소인 body에 하고, body는 flex container라고 한다. 자식 요소인 di.. 2021. 7. 11. [CSS] 웹 프로젝트 5일차! (CSS의 기본 문법 & margin) 오늘은 CSS를 처음 배우는 날이다. CSS를 HTML에 적용하는 방법부터 기본 문법, 특징까지 차근차근 배워 보았다. CSS를 HTML에 적용하는 방법) 1) HTML script 자체에 적용하는 방법 style 태그 안에 CSS 코드를 작성하면 된다. 2) CSS script를 HTML 파일에 적용하는 방법 link 태그를 사용해서 style.css란 만들어놓은 css파일을 html파일에 연결해주면 된다. 기본 문법) selector { property: value; } "selector에 value 값의 property를 적용한다."라고 이해하면 편하당ㅎㅎ {} 는 스타일 범위의 시작을 의미한다. ex) h1 { color: blue; font-size: 20px; } 이런식으로 적용하면 된다!! .. 2021. 7. 10. 이전 1 2 다음
