Etc/HTML & CSS7 [HTML & CSS] Twittler 목업 구현 보호되어 있는 글 입니다. 2022. 6. 29. [HTML & CSS] 웹 앱 화면 설계하기 와이어프레임 설계HTML로 웹 앱 구조 잡기id와 class의 이해 와이어프레임 설계 및 목업 구현 🕸️ 와이어프레임(Wireframe)레이아웃의 뼈대를 그리는 단계로, 가장 큰 목적은 화면의 영역을 구분하는 일이다 🖼️ 목업(Mock-up)실제 서비스가 작동하는 모습과 동일하게 HTML, CSS을 작성 HTML로 웹 앱 구조 잡기 1. 만들고 싶은 웹 페이지 구조를 생각해 보고, 어떤 태그를 이용해야 할지 생각한다2. 영역 별로 여러 태그를 하나의 태그(div 등)로 감싸 준다 → form으로 감싸 줄 경우 div 요소를 사용하는 것보다 더 시맨틱한 요소 사용이다 input, button 요소 등의 자식 요소를 감싸는 경우에 자주 사용되는데, 페이지 전환이 되.. 2022. 6. 28. [HTML & CSS] 페이지 레이아웃 웹 사이트 성격과 목적에 맞게 HTML 구조 만들기Flexboxflex-direction flex-wrapjustify-contentalign-itemsalign-content grow shrinkbasis 레이아웃: 화면을 나누는 방법 📏 수직 분할, 수평 분할CSS로 화면 구분 시 수직 분할과 수평 분할을 차례로 적용하여 콘텐츠 흐름에 따라 작업한다Atomic CSS 방법론: 클래스 이름과 구현을 1:1 일치시켜 작은 단위로 CSS를 작성한다 영역1 영역2 영역3 🎈 레이아웃 리셋HTML의 기본 스타일이 레이아웃에 방해가 될 때1. 태그의 여백2. width, height 계산이 여백을 포함하지 않음 (box-sizing 참고)3. 브라우저마다 기본 스타일이 약간씩 다름해결 방법: 라.. 2022. 6. 28. [HTML & CSS] CSS css의 이해와 기본 구조, 문법HTML에 적용하는 방법텍스트 꾸미기기본적인 박스 모델MDN, W3C School에서 속성 검색하고 사용하기 CSS Cascading Style Sheets → 좋은 사용자 경험(UX; User Experience)을 제공스타일링 도구이기 때문에 독립적으로 기능하지 않고, HTML가 있어야 동작한다 🍭 사용자 인터페이스(UI; User InterFace)인터페이스: 컴퓨터와 교류하기 위한 연결고리 - 이전 시대에는 CLI(Command Line Interface)를 사용해야 했다 ⚒️ 기본 구조와 문법body { margin: 0; padding: 0; background: #fff; color: #4a4a4a;}header, footer { font-size.. 2022. 6. 27. [HTML & CSS] HTML HTML의 이해와 기본 구조, 문법마크업 언어자주 사용되는 요소: , , , , , 등시맨틱 태그 HTML HyperText Markup Language: 웹 페이지의 틀을 만드는 마크업 언어마크업 언어란? 태그 등을 이용하여 문서나 데이터 구조를 표현한다시맨틱 요소란? 자체에 의미를 가지는 요소, 속성을 보지 않고도 이름만 봐서 파악이 가능하다 이름에 의미를 붙여 부르는 태그 ⚒️ 기본 구조와 문법· Tag(부등호()로 묶인 HTML의 기본 구성 요소)들의 집합· Tree Structure: 문서 시작 → html ⊃ head, body· SELF-CLOSING TAG: 닫는 태그가 없는 경우(태그 내부에 내용이 없는 경우) .. 2022. 6. 27. [HTML & CSS] 웹호스팅(github pages) github(https://github.com)의 pages 기능 https://yujung-jang.github.io/web1/ SpringDream Hope Finally achieve the goal Great minds have purposes, others have wishes.yujung-jang.github.io 2021. 3. 14. 이전 1 2 다음
