본문 바로가기

WEB/HTML | CSS4

[HTML] 시멘틱 태그 Semantic Tag 시멘틱 태그 Semantic Tag HTML5에 도입된 시멘틱 태그는 의미론적인 태그이다. 단순히 시멘틱 태그만으로는 화면이 변하지 않지만, 문서의 구조를 브라우저와 개발자가 쉽게 알아볼 수 있도록 한다. 구조 header : 문서나 section의 머리글을 지정한다. nav : 요소 탐색 링크의 집합이다. (주로 메뉴바를 만들 때 사용한다.) section : 여러 중심 내용을 감싸준다. article : 내용을 정의한다. aside : 중심 내용 요소를 제외한 콘텐츠를 정의한다. (링크, 메뉴, 광고 등) footer : 문서나 section의 바닥글을 지정한다. section section 내에는 header와 footer를 넣을 수 있고, section 내에 section을 넣는 것도 가능하다. 2019. 12. 4.
[HTML] 폼태그 form tag form 태그 웹 페이지의 입력양식 (로그인, 회원가입 등) 전체적인 양식을 의미하는 추상적인 코드이다. 따라서 form 태그 자체로는 화면에 보이지 않는다. 입력된 정보(데이터)를 다른 목적지로 보낼 수 있다. Attribute 속성 action : 양식이 제출될 때 양식 데이터를 보낼 URL method : 양식 데이터를 보내는 방법 (get/ post) GET POST 이름 - 값 양식 데이터를 URL에 추가한다. HTTP 요청 본문 내에 양식 데이터를 추가한다. URL의 길이가 제한적이다. (약 3000자) 길이 제한이 없다. URL에 데이터가 추가되기 때문에 민감한 정보가 포함되어있는 경우 권장하지 않는다. (비보안 데이터에 적합하다.) 보안 데이터에 적합하다. name : form의 이름 Ta.. 2019. 11. 28.
[CSS] 선택자 Selector CSS 선택자 스타일 속성을 적용하는 요소를 선택자라고 한다. 선택자는 태그 하나가 될 수도 있고 각기 다른 태그 여러개를 묶어서 별도의 선택자로 지정할 수도 있다. Hello World html/css 이런식으로 태그에 하나하나 스타일 속성을 지정해줄 수도 있지만 나중에 속성을 바꿔야 하는 일이 생길 경우, 또 다시 하나하나 바꿔줘야 하는 어려움이 있다. Hello World html/css CSS 선택자를 사용해서 스타일 속성을 적용하고자 하는 태그를 묶어 한번에 지정하면 유지보수도 쉬워지고 코드도 간결해진다. 선택자에는 여러가지 종류가 있으며 사용자의 의도에 맞게 적절히 혼합 사용하는 것이 중요하다. 타입 선택자 태그의 이름을 지정한다. See the Pen mddQzJR by Joy (@Joy-P.. 2019. 11. 16.
[HTML] HTML 기초 HTML HyperText Markup Language 하이퍼텍스트를 마크업하는 언어 온라인 상의 문서를 만들기 위한 구조화된 언어 HyperText 하이퍼텍스트 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능 Markup 마크업 태그를 사용하여 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진이고 링크인지 표시하는 기능 태그 마크업할 때 사용하는 약속된 표기법을 태그(Tag)라고 한다. HTML은 태그를 사용해서 구조화를 하며 웹 문서에 표시하려는 내용을 전달하는 데 매우 중요한 역할을 한다. 를 이용해서 구분한다. 태그는 대문자와 소문자를 구별하지는 않지만, HTML5 표준 명세에는 소문자 사용을 권장한다. 와 를 정확히 입력한다. (br, img 와 같이.. 2019. 11. 16.