HTML (3) 썸네일형 리스트형 Section1 Unit4 HTML, CSS 활용 - 계산기 만들기 Section1 Unit4 [HTML/CSS] 활용 계산기 목업 만들기 ⭐️ 과제. 계산기 목업 만들기 • 와이어프레임 • HTML, CSS 작성 작성했던 와이어프레임을 토대로 HTML을 작성하고, CSS로 스타일링을 했다. 페어 프로그래밍 과제라 페어와 함께 진행하고, 수업이 끝난 후에 각자 보완하는 시간을 가졌다. 나는 최대한 실제 디자인과 비슷하게 하려고 했고, 브라우저 사이즈에 맞게 크기가 유동적으로 변했으면 해서 min/max width, height 크기를 정한 후 상대적 단위인 %, rem 등을 사용해서 CSS를 작성했다. 이 과정에서 font-size가 생각대로 조절이 잘 되지 않아서 고민을 좀 많이 했었는데 media query로 해결했다. 👩🏻💻 계산기 목업 만들기 HTML, CSS .. Section1 Unit4 HTML, CSS 활용 Section1 Unit4 [HTML/CSS] 활용 📌 Chapter1. 레이아웃 • 와이어프레임과 목업 와이어프레임과 목업을 작성하는 단계를 건너뛰고, JavaScript로 동작하는 애플리케이션을 만들 수 있지만 HTML 문서를 통해 화면을 다 그려보지 않으면 JavaScript를 적용한 완성본이 어떤 형태를 가질지 상상하기 어렵다. 마치 설계도 없이 건물을 짓는 것과 같으니 와이어프레임과 목업을 작성하는 단계는 중요하다. → 와이어프레임: 웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계. 단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것 → 목업: 실물 제품이 없는 무형의 웹 또는 앱의 목업은 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성하는 것 • .. HTML5 시맨틱 요소 (Semantic Element) update 23.06.27 👾 시맨틱 요소(Semantic Element)란 무엇일까? 시맨틱 요소(의미 요소, semantic element)란 그 자체로 의미를 가지고 있는 요소를 가리킨다. → semantic : 의미가 있는, 의미론적인 즉, 요소가 자기 스스로 브라우저와 개발자 모두에게 자신이 사용된 의미를 명확히 전달해 주는 요소를 의미한다. HTML5에서는 시멘틱 웹이 중시되면서 여러 시맨틱 요소가 새롭게 만들어졌고, 의미를 가진 요소를 사용하는 방식을 추구하기 시작했다. 👾 시멘틱 요소를 사용해야 하는 이유 1. 검색 효율성 검색 엔진은 HTML 코드를 보고 문서의 구조를 파악하기 때문에 어떤 시맨틱 요소를 사용함으로써 어떤 요소에 더 중요한 내용이 들어있을지 우선순위를 정할 수 있고, 우.. 이전 1 다음
