HTML(7)
-
상속 제어하기
initial 부모의 값을 상속받고 싶지 않을 때 보통 상속 받지 않을 값을 따로따로 설정해서 사용하지만 all을 통해 모두 상속 받지 않을 수 있음 inherit 부모의 값을 상속 받고 싶을 때 이것 또한 all을 이용하여 모두 상속 받을 수 있음 unset 부모로부터 상속 받을 값이 있을 때는 initial로 작용함 부모로부터 상속 받을 값이 없을 때는 inherit으로 작용
2023.03.28 -
메타데이터 요소
메타데이터의 역할 head의 내용은 페이지에 표시되지 않음. 대신에 head의 내용이 하는 일은 페이지에 대한 metadata를 포함함 데이터를 위한 데이터 데이터를 설명하는 정보 html문서를 설명하는 정보 title title태그 사이에 text로 문서를 설명하는 제목을 넣어주면 됨 title 태그 사이에 텍스트는 무시가 됨 하나의 html엔 하나의 title만 있어야함 페이지 제목은 SEO에 큰 영향을 줌 명사로만 이루어진 제목은 피하는게 좋음. 광고로 인식을 하는 경우가 많음 meta-문서 정보 빈요소기 때문에 정보가 없음 속성에다가 정보를 나열하게 됨 name이라는 속성은 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공 할 수 있음 application-name은 웹..
2023.03.27 -
HTML5 시멘틱 태그와 표준을 지키는 이유
HTML5과 웹 브라우저 .html 이란 확장자를 구동할 수 있는것이 웹 브라우저 웹 브라우저는 크롬, 엣지, 익스플로어, 사파리 등등이 있음 html은 하이퍼텍스트 마크업 언어로 웹 페이지를 위한 지배적인 마크업 언어임 마크업 언어는 데이터를 어떤 방식으로 어떻게 표현할지 정의함 시멘틱 태그란? 의미를 가진 태그임 ,,,,,등이 있음 사이트의 구조를 파악하기 쉽고, 코드를 이해하기 쉽고 명확하게 전달해줌 코드를 이해하기 쉽다 == 유지보수의 비용을 줄일 수 있다 웹 접근성 측면에서도 스크린 리더가 해당 태그를 사용자에게 더 명확한 의미를 전달 할 수 있음 웹 표준이란? 브라우저 종류와 버전의 차이에 따라 생기는 차이를 호환이 가능하도록 표준으로 웹 페이지를 제작하는 기법 웹 표준의 목적은 웹 사이트에 ..
2023.03.26 -
HTML 한 걸음 더(2)
사용자 몰래 값을 전달하는 input 태그의 hidden 속성 ● 동일한 폼이 여러개 있거나 그 폼을 제출하면서 서버가 알아야할게 있다면 hidden속성 사용함 이모티콘 같은 문자는 svg태그 ● vector data: 그래픽이 어떤 부분에서 어떤 모양으로 휘어지는지, 어떤 색으로 채워지는지 정보를 가지고 있기 때문에 확대해도 깨지지 않음 ● bitmap data: 확대를 할 때 이미지가 깨짐 ● svg는 vector data i태그의 재활용-fontawesome, bootstrap ● cdn가지고 와서 link 태그 안에 넣기 ● fontawesome, bootstrap에서 원하는 아이콘 찾아서 i태그로 복사 붙여넣기 ● html을 복사해서 body안에 넣어도 되지만 안에 내용이 무엇을 의미하는지 모르..
2023.03.08 -
HTML 한 걸음 더(1)
웹어플리케이션이란 ● 정적인 콘텐츠를 보여주기만 하는게 아니라 우리의 웹페이지에서 사용자와 소통을 할 수 있는 곳 .top-left span { cursor: pointer; } .top-left span:nth-of-type(1):hover { color: red; } #fill-heart { display: none; fill: red; } ● 커서와 클릭을 통해 하트가 반응하게 만들 수 있음 정보를 제출할 땐 form태그 ID : PW : ● form 태그로 로그인 입력창 만들기 ● 로그인 클릭 시 result.html로 가게 만들기 form 태그의 action과 method 속성 ● form 태그엔 action과 method를 필수로 가지고 있어야함 ○ action은 사용자가 input태그를 통해..
2023.03.08 -
HTML 기본 태그
문단을 표현할 땐 p태그 ● p태그는 문단의 시작을 알림 ● p태그 안에서 공백을 만들어도 브라우저에서는 보이지 않음 ● 줄바꿈이 필요할땐 br태그로 줄바꿈을 해줘야함 ● => >, & => 공백 ● html entities로 특수한 문자 알 수 있음 제목을 표현할 땐 h태그 ● h1부터 h6까지 있음 ● 1에서 6으로 갈 수록 글자크기가 줄어듬 목록을 보여주는 ul,ol,li태그 ● ol: 순서목록 ● ul: 순서가 없는 목록 ● li: 목록의 내용 폰트 스타일을 위한 태그 ● b: 단순히 글자만 굵게 ● i: 기울게 ● u: 고유명사, 철자가 틀렸을 때 ● s: 문서의 내용이 틀렸을 때 ● del: 예전 버전에는 있었는데, 최신 버전에는 삭제된 내용 특별한 의미를 가지고 있는 Se..
2023.03.05