HTML&CSS

웹 앱 화면 설계하기

와이어프레임 설계 및 목업 구현 와이어프레임(Wireframe) 웹 또는 앱을 개발할 때 레이아웃의 뼈대를 그리는 단계 아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도 가장 큰 목적은, 화면의 영역을 구분하는 일 각 영역에서 사용할 주요 태그를 메모하는 형식으로 와이어프레임을 작성 할 것 이용 사이트 : https://ovenapp.io/ OvenApp.io Oven(오븐)은 HTML5 기반의 무료 웹/앱 프로토타이핑 툴입니다. (카카오 제공) ovenapp.io Twittler 목업 구현 허접하긴 하지만 나름 페어와 열심히 한 결과물.. twittler Username Message Tweet! check new tweets #greeting { font-size: 20px; font-famil..

CSS - Flexbox 레이아웃

레이아웃 작업 흐름 좌에서 우(수직분할), 위에서 아래(수평분할) 순서로 작업을 진행한다. 수직분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치한다. 수평분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치한다. 수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있다. 레이아웃 리셋 박스의 시작을 (0,0)의 위치에서 시작하고 싶은데, 태그가 가진 기본 스타일에 약간의 여백이 있다. width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있다. 브라우저마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다르다. * { box-sizing: border-box; } body { ..

CSS 기초

: HTML 파일과 다른 파일을 연결하는 목적으로 사용 : Selector. id가 있는 요소를 선택할 때에는 #기호를 이용한다. id는 하나의 문서에서 한 요소에만 사용해야 한다. HTML This is the navigation section. CSS #navigation-title { color: red; } class : 여러 요소 Select 여러 요소에 같은 스타일링을 적용하기 위해서는 class를 사용한다. Class가 있는 요소를 선택할 때 .기호 사용 HTML Home Mac iPhone iPad CSS .menu-item { text-decoration: underline; } text-decoration: underline : 밑줄 적용 여러 개의 class를 하나의 엘리먼트에 적용 ..

HTML 텍스트 기본

목차 1. : HTML에서는 각 단락은 요소 안에 둘러싸여 있어야 한다. I am a paragraph, oh yes I am. 2. : 각 제목도 heading 요소 안에 둘려싸여 있어야 한다. I am the title of the story. 메인 제목을 으로 나타내고, 소제목을 으로 나타내고, 소제목의 소제목을 으로 나타내고 이런 식으로 제목들을 나타낸다. 3. : 목록의 항목을 나타낸다. 반드시 정렬 목록(), 비정렬 목록(, 혹은 메뉴() 안에 위치해야 한다. 1) : Unordered (순서 없음) 예시 milk eggs bread hummus 결과 milk eggs bread hummus 2) : Ordered (순서 있음) 예시 milk eggs bread hummus 결과 milk eg..

HTML 시작하기

목차 HTML(HyperText Markup Language) HTML 요소(Element)의 구조 블럭 레벨 요소 vs 인라인 요소(Block versus inline elements) 빈 요소(Empty elements) 속성(Attributes) HTML 문서의 구조 HTML 시맨틱 (Semantics) (참고 자료 : https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML) 1. HTML(HyperText Markup Language) 웹페이지를 구성하는 마크업 언어 ( 마크업 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어) 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어 대소문자를 구분하지 않지만 가독성..