HTML5 HTML의 메타데이터 최근 예전에 만들었던 프로젝트 코드를 정리하면서 큰 고민 없이 써왔던 html 코드가 신경 쓰이기 시작했다. 그래서 이번 기회에 한 번쯤 정리해두고 싶었던 메타데이터에 대해 정리해 보기로 했다. 참고로 메타데이터란 일련의 데이터를 정의하고 설명해 주는 데이터를 의미한다. 먼저, HTML 문서의 구조를 보면, This is my page 로 이 문서가 HTML 문서임을 나타내고, 태그 안에 요소와 요소가 위치해 있는 것을 확인할 수 있다. 요소는 실제 화면에 보이는 부분은 아니지만, 검색 결과에 노출될 키워드, 홈페이지에 대한 설명 등을 담고 있으며, 요소는 실제로 페이지에 표시될 콘텐츠가 포함되는 부분이다. 위 예제의 안에 있는 은 문서의 문자 인코딩 설정을 UFT-8 (전 세계에서 사용되는 대부분의 문.. 2023. 8. 22. ✨ 귀여운 계산기 ✨ 미니 프로젝트 스터디를 시작했다. 첫 번째 주제는 바로 계산기 만들기! 안 그래도 실습 때 만들었던 계산기 목업에 실제 기능을 넣어볼 생각이었기 때문에 즐겁게 프로젝트를 시작했다. 실습 때 만들었던 계산기 목업 ↓↓↓ https://ddppp.tistory.com/31 나만의 계산기 만들기 아래 이미지는 12/26일 페어 실습 때 만든 계산기 목업이다. 먼저 아래와 같이 파워포인트를 이용하여 간단한 와이어 프레임을 만든 후 작업하였다. 배경과 글꼴은 웹에서 가져와봤고, 정렬은 flex ddppp.tistory.com - 예전에 짰던 코드를 다시 보려니 이해하기 쉽지 않았다. 그때도 나름 체계적으로 정리한다고 한 것 같은데 아무래도 눈에 확 들어오지는 않는 것 같다. 아직 기능 구현만으로도 벅차긴 하지만 .. 2023. 1. 29. 나만의 계산기 만들기 아래 이미지는 12/26일 페어 실습 때 만든 계산기 목업이다. 먼저 아래와 같이 파워포인트를 이용하여 간단한 와이어 프레임을 만든 후 작업하였다. 배경과 글꼴은 웹에서 가져와봤고, 정렬은 flexbox를 이용했다. 계산기 각 부분의 색은 크롬 응용 프로그램으로 배경색을 따와 활용하였다. 하면서 어려웠던 점은 먼저, flex 정렬이 의도와 다르게 반영되는 경우가 많아서 다루기가 쉽지 않았다. 원하는 대로 구조를 짤 수 있도록 연습해야겠다는 생각이 들었다. 그리고 별거 안 한 거 같은데 코드가 꽤 길게 나왔다. 코드를 좀 더 깔끔하게 정리할 수 있는 방법을 찾아봐야겠다. 이번 실습을 통해 그동안 배운 내용을 이용하여 처음부터 끝까지 직접 무언가를 만들어 볼 수 있었다. css도 이것저것 검색하고 적용해보면.. 2023. 1. 1. [HTML/CSS] 활용 보호되어 있는 글 입니다. 2022. 12. 24. [HTML] 기초 보호되어 있는 글 입니다. 2022. 12. 22. 이전 1 다음
