신나yo-TechBlog

html / 엘리 / html기초 / 유튜브 학습목표 웹 사이트 분석 방법을 익힌다. 분석한 내용을 스스로 클론 코딩할 수 있다. 배운 것 당장 스스로 클론코딩 하기에는 무리가 있다는 점을 깨달음 상용화된 사이트들의 경우, 디자인과 반응형 요소, Server side(파이썬, php 등 다른 언어 사용하는 코드) 요소가 많이 가미되어 있기 때문에 html문법만 아는 현재 상태에서는 사이트 코드들을 분석 및 이해하고 적용하기 매우 어렵다. 웹 사이트의 구조를 분해해 분석하는 습관 들이기의 중요성 웹 사이트의 각 페이지를 큰 박스부터 시작해서 조각조각 '박스 형태로 분해'하는 습관. 웹 개발시, 특히 훗날 react 활용할 때 도움이 많이 된다고 한다. 최소 단위부터 기능 구현하는 데 도움이 된다나? 지금은..

노션 노트 www.notion.so/_Html-801174f1bc584d169a8af89a76197cf8

html / 이고잉 / 생활코딩 html / 오픈튜토리얼스 학습목표 html 코드 작성 방식을 손에 익힌다. 구조화된 사고, 코드 정리 논리를 익힌다. 사이트 제작 실습을 통해, 수업 중 배우는 태그의 응용을 연습한다. 실습을 통해 개인화된 사이트 하나를 포트폴리오로 남긴다. 배운 것 html의 기본 문법 개발환경인 atom을 활용하여 코드 작성하는 방법 emmet 패키지 다운로드, 활용방법 html에서 통계적으로 많이 사용되는 태그와 속성들의 기능 html 활용에 있어서 구조화된 정보 입력의 중요성_구조화하여 설계하기! html이 '정보 전달'에 집중하는 언어이기 때문. 본질이 '정보 전달'! 함께 쓰이는 css는 디자인, JavaScript는 반응형 기능을 도맡고 있다. 다 익혀둬야겠다는 필요성을 실..

생활코딩 html강의를 수강하며, 즐겨 활용하는 사이트 홈페이지의 소스코드를 보다가 "button"이라는 태그에 꽂혀서 다짜고짜 개인 실습 사이트에 적용해봤다. a태그로 감싸, 버튼을 누르면 다른 페이지로 옮겨갈 수 있도록 했다. 투표 건의사항 그런데, 수업 따라가다 보니, input태그의 타입 중에도 button이 있었고 이 명령어가 수행하는 기능도 유사해 보였다. '클릭하는 버튼을 생성'하는 것. 실행하는 기능은 비슷해보이는데 작성하는 코드가 달라지는 점이 흥미로워서 둘의 차이를 탐색해봤다. 위와 같은 내용을, input태그 button타입으로 입력하는 코드는 아래와 같다. 솔직히, 둘의 차이를 이론적으로 정확하게, 깊이는 모르겠다. 다만, 실험해본 결과 태그로 링크를 걸어 감쌌을 때 으로 쓴 경우 ..

a태그는 하이퍼링크 즉, 다른 페이지로의 연결(링크)에 사용한다. a의 속성 중에서 가장 중요한 것은 href인데, 이는 링크의 목적지(url)을 명시하는 속성이다. 따라서, href와 꼭 함께 써야 한다! 아래 예시는 생활코딩html강의(링크) 수강 중 실습한 내용이다. 오늘의 명언 우리 모두는 자신의 힘으로 발견한 내용을 가장 쉽게 익힌다. (도널드 커누스) 위 예시 외의 학습 내용은 w3schools의 tag 설명페이지(링크)를 참고했다. 아래 표는 a태그의 속성들을 정리한 것이다. 속성이름 속성 값 실행 기능 href URL 링크될 페이지를 지정(구체화 한다) target ((표 아래에 보충 설명)) 링크된 문서를 어디에 띄울 것인지 지정 download 파일명 링크 클릭 시, 지정한 파일을 다운..

해석본의 원문은 w3schools사이트의 doctype설명 모든 html 문서는 선언으로 시작해야 한다. 이 선언은 html태그는 아니고, 페이지가 어떤 문서 형식인지를 나타내는 정보이다. html5에서, 간결하게 을 쓰면 된다. 참고로, 선언은 대소문자를 구별하지 않는다. 난 여태 이걸 몰라서 귀찮지만 대문자로 꾸역꾸역 썼다ㅋㅋㅋㅋ 앞으로는 소문자로 써야지. 여담으로, html4나 xhtml에서는 DTD(문서타입 정의)를 참조해서 선언을 작성해야 하기 때문에 좀 더 복잡해진다. '왜 html5는 선언문이 짧아졌고, 다른 것들은 긴 것인지'는 당장 필요한 정보도 아니고, 흥미도 없어서 찾아보진 않았다. 예시로, html4.01의 경우,