[start project] 연락처 앱 마크업하기 - 1. 화면 설계 [start project] 연락처 앱 마크업하기 - 2. 메인화면 [start project] 연락처 앱 마크업하기 - 3. 상세화면 [start project] 연락처 앱 마크업하기 - 4. 정리 연락처 앱의 간단한 화면들을 만들어보며 margin, flex, hover, border-radius... 등등 여러 css 속성들을 써보았고 fontawsome 이라는 아이콘 라이브러리도 써보았다. 나는 마크업을 전문적으로 배운 사람은 아니다.... 야매로 익힌 것들이지만, 누군가에게는 도움이 되었으면 좋겠어서 적어봤다. 그러니 '실무에선 저렇게 안 쓰는데?!' 라며 돌을 던지지는 말고 .... ㅎㅎ 다들 우스갯소리로 웹 프로그래머,특히..
HTML
[start project] 연락처 앱 마크업하기 - 1. 화면 설계 [start project] 연락처 앱 마크업하기 - 2. 메인화면 [start project] 연락처 앱 마크업하기 - 3. 상세화면 [start project] 연락처 앱 마크업하기 - 4. 정리 ✨ 파일 생성 - main.html : 메인 화면 - detail.html : 상세 화면 - style.css : 공통 스타일과 main.css, detail.css 를 import 하는 파일 - main.css : 메인화면 스타일 - detail.css : 상세화면 스타일 ✨ 전체 프레임 전체 프레임은 이전에 만들었던 대로 만들면 된다. ... Phone Book ... ✨ 뒤로가기 버튼과 상세 정보 컨테이너 화면 설계에는 없었지만.. ..
[start project] 연락처 앱 마크업하기 - 1. 화면 설계 [start project] 연락처 앱 마크업하기 - 2. 메인화면 [start project] 연락처 앱 마크업하기 - 3. 상세화면 [start project] 연락처 앱 마크업하기 - 4. 정리 ✨ 파일 생성 - main.html : 메인 화면 - detail.html : 상세 화면 - style.css : 공통 스타일과 main.css, detail.css 를 import 하는 파일 - main.css : 메인화면 스타일 - detail.css : 상세화면 스타일 ✨ 전체 프레임 연락처 화면을 화면 한 가운데에 띄울 것이다. 먼저 html 을 아래처럼 작성하자. root 는 화면 전체를 차지하는 빈 공간이다. root 안에 메인..
[start project] 연락처 앱 마크업하기 - 1. 화면 설계 [start project] 연락처 앱 마크업하기 - 2. 메인화면 [start project] 연락처 앱 마크업하기 - 3. 상세화면 [start project] 연락처 앱 마크업하기 - 4. 정리 ✨ 프로젝트 목표 위 화면을 html, css 로 구현할 것이다. 애니메이션 등의 고급진 스킬들은 다루지 않는다. 앞서 정리한 box model, position, flex, margin auto 등등만을 이용해 구현할 계획이다. ✨ 화면 구성 메인 화면 - 헤더 - 내 프로필 - 검색바 - 연락처 리스트 상세 화면 - 프로필 - 상세 정보 - 옵션메뉴
[html, css] 자주 쓰는 css 선택자(selector) [html, css] box model [html, css] position - relative, absolute, fixed [html, css] flex - 반응형으로 정렬하기 [html, css] margin: auto - 가운데정렬, 푸터, 헤더, 양 옆에 붙는 내비게이션 position 은 html 요소의 위치를 설정할 수 있는 css 옵션이다. static 은 기본값으로, html 에 선언된 대로 차곡차곡 쌓이고... relative 는 원래 위치를 기준으로 위치를 설정한다는 옵션, absolute 는 body 를 기준으로 위치를 설정한다는 옵션, fixed 는 body 를 기준으로 위치를 설정하며 스크롤을 내려도 고정이 되는 옵..
[html, css] 자주 쓰는 css 선택자(selector) [html, css] box model [html, css] position - relative, absolute, fixed [html, css] flex - 반응형으로 정렬하기 [html, css] margin: auto - 가운데정렬, 푸터, 헤더, 양 옆에 붙는 내비게이션 box model 이란 웹 element 하나하나가 가지고 있는 공간을 의미한다. css 작업을 하기 위해 필수로 알아둬야 하는 중요한 개념! 쉽게 설명을 하자면, Content 는 눈에 보이는 내용이고 Border 는 우리가 흔히 알고 있는 테두리다. Border 바깥 여백은 Margin 으로 다른 content 간 간격을 조정할 수 있고 Border 안쪽 여백은..
[html, css] 자주 쓰는 css 선택자(selector) [html, css] box model [html, css] position - relative, absolute, fixed [html, css] flex - 반응형으로 정렬하기 [html, css] margin: auto - 가운데정렬, 푸터, 헤더, 양 옆에 붙는 내비게이션 내가 자주 쓰고 자주 봤던 css 선택자들을 정리해보았다. * 알아둬야 할 개념 - 부모요소 : 한 단계 위에 있는 요소 - 자식요소 : 한 단계 아래에 있는 모든 요소 - 하위요소 : 아래에 있는 모든 요소 - 형제요소 : 같은 부모를 가진 모든 요소 1. 식별자 2. 다중선택 3. 관계로 선택 4. 속성값 선택 5. 액션 1. 식별자 - tag name p {...
