Etc/HTML & CSS7 Twittler 목업 구현 보호되어 있는 글 입니다. 2022. 6. 29. 웹 앱 화면 설계하기 와이어프레임 설계 HTML로 웹 앱 구조 잡기 id와 class의 이해 와이어프레임 설계 및 목업 구현 🕸️ 와이어프레임(Wireframe) 레이아웃의 뼈대를 그리는 단계로, 가장 큰 목적은 화면의 영역을 구분하는 일이다 🖼️ 목업(Mock-up) 실제 서비스가 작동하는 모습과 동일하게 HTML, CSS을 작성 HTML로 웹 앱 구조 잡기 1. 만들고 싶은 웹 페이지 구조를 생각해 보고, 어떤 태그를 이용해야 할지 생각한다 2. 영역 별로 여러 태그를 하나의 태그(div 등)로 감싸 준다 → form으로 감싸 줄 경우 div 요소를 사용하는 것보다 더 시맨틱한 요소 사용이다 input, button 요소 등의 자식 요소를 감싸는 경우에 자주 사용되는데, 페이지 전환이 되는 액션이 발생할 수 있도록 주의해.. 2022. 6. 28. 페이지 레이아웃 웹 사이트 성격과 목적에 맞게 HTML 구조 만들기 Flexbox flex-direction flex-wrap justify-content align-items align-content grow shrink basis 레이아웃: 화면을 나누는 방법 📏 수직 분할, 수평 분할 CSS로 화면 구분 시 수직 분할과 수평 분할을 차례로 적용하여 콘텐츠 흐름에 따라 작업한다 Atomic CSS 방법론: 클래스 이름과 구현을 1:1 일치시켜 작은 단위로 CSS를 작성한다 영역1 영역2 영역3 🎈 레이아웃 리셋 HTML의 기본 스타일이 레이아웃에 방해가 될 때 1. 태그의 여백 2. width, height 계산이 여백을 포함하지 않음 (box-sizing 참고) 3. 브라우저마다 기본 스타일이 약간씩 다름 해결 방.. 2022. 6. 28. 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-si.. 2022. 6. 27. HTML HTML의 이해와 기본 구조, 문법 마크업 언어 자주 사용되는 요소: , , , , , 등 시맨틱 태그 HTML HyperText Markup Language: 웹 페이지의 틀을 만드는 마크업 언어 마크업 언어란? 태그 등을 이용하여 문서나 데이터 구조를 표현한다 시맨틱 요소란? 자체에 의미를 가지는 요소, 속성을 보지 않고도 이름만 봐서 파악이 가능하다 이름에 의미를 붙여 부르는 태그 ⚒️ 기본 구조와 문법 · Tag(부등호()로 묶인 HTML의 기본 구성 요소)들의 집합 · Tree Structure: 문서 시작 → html ⊃ head, body · SELF-CLOSING TAG: 닫는 태그가 없는 경우(태그 내부에 내용이 없는 경우) Hello world Contents here Here too!.. 2022. 6. 27. 웹호스팅(github pages) github(https://github.com)의 pages 기능 https://yujung-jang.github.io/web1/ Spring Dream Hope Finally achieve the goal Great minds have purposes, others have wishes. yujung-jang.github.io 2021. 3. 14. 이전 1 2 다음
