Today Hailie Learned

css란 Cascading Style Sheets(CSS) 웹 페이지를 사람에 비유해보자면, 마크업 언어(HTML)는 몸의 구조(뼈, 근육)를 담당하고 CSS는 옷과 신발과 같이 외적으로 꾸며주는 역할을 한다고 생각하면 이해하기 쉽습니다. CSS와 HTML CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다. CSS는 분명히 HTML과는 독립된 다른 언어지만 마크업 문서 자체가 존재하지 않으면 CSS는 무용지물이나 마찬가지입니다. 왜냐하면, CSS는 표현을 위한 언어인데 마크업 문서가 없다면 표현할 대상이 없기 때문입니다. 그래서 CSS는 보통 마크업 언어인 HTML과 같이 묶어서 이야기합니다...

검색 엔진 최적화란? HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업입니다. 해당 웹페이지의 내용을 파악하고 검색엔진에 노출이 잘되도록 하기 위해서는 HTML 요소를 적절하게 사용한 시멘틱한 마크업이 필요합니다. 시멘틱 마크업 이란? 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다. 애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다...

HTML5에는 요소들이 가지고 있는 성격에 따라 요소의 종류를 정의하는 규칙들이 있습니다. 요소는 이 규칙들을 준수해야 하며, 반드시 HTML 권고안을 따라야 합니다. 이런 규칙에 대해 비슷한 성격의 요소들끼리 그룹화한 것이 콘텐츠 모델이며, 각각의 요소들은 하나 또는 여러 개의 콘텐츠 모델에 속하게 됩니다. Content Models 의 7 분류 1. Metadata Content " base, link, meta, noscript, script, style, title " Metadata에는 콘텐츠의 스타일, 동작을 설정하거나 다른 문서와의 관계 등 정보를 포함하는 요소들이 포함됩니다. 메타 태그, 타이틀 태그, 스타일 태그, 링크 태그가 이에 해당하며 대부분 내에 들어간다는 것이 특징입니다. 2. ..

label 이름: 이름: 이름: form 요소의 id 속성값과 의 for 속성값을 같게 적어주어야 합니다. 을 사용하면 이를 클릭했을 경우 해당 form 요소를 클릭한 것처럼 동작합니다. 또한, 스크린 리더기를 통해 듣게 되면 해당 form 요소에 접근 시 을 함께 읽어주게 됩니다. 은 사용성, 접근성적인 측면으로 중요한 역할을 하므로 반드시 써주는 것이 좋습니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. 화면상 변화는 없지만 실제로 이 아이디와 이 입력 요소는 연결이 된 상태다. 그래서 id: 부분을 눌러도 커서가 공간에 깜빡인다! fieldset & legend , 는 form 요소를 구조화 하기 위해 필요한 태그입니다. : 여러..

select 는 선택 목록 상자 또는 콤보박스라고도 합니다. 몇 개의 선택지를 리스트 형태로 노출하고 그중 하나를 선택할 수 있게 하는 태그입니다. (multiple 속성을 사용하면 다중 선택도 가능합니다.) 내부의 으로 각 항목을 나타냅니다. 의 속성으로는 selected가 있으며 이는 선택된 항목을 의미합니다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. textarea 한 줄만을 입력할 수 있는 와 달리 여러 줄의 텍스트를 입력할 때 사용합니다. 에는 텍스트 상자의 크기를 조절하는 rows, cols 속성이 있습니다. cols : 가로 크기를 조절하는 속성(한 줄에 들어가는 글자의 수, 수치의 의미는 평균적인 글자의 너비로 정확히 ..

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 은 대표적인 폼 요소입니다. 은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다. type = "text" See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. placeholder "text"안의 글자 type = "password" 입력하면 특수문자로 나오게 된다. See the Pen Untitled by HelloHailie (@hellohailie) on CodePen. type = "radio" 한 개만 클릭되게 하기 name 이라는 속성으로 같은 성격의 radio 버튼임을 명시해줘야 한다. 여자 남자 See the Pen Untitled by ..

표의 구성 요소 표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다. 표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다. : 표를 나타내는 태그 : 행을 나타내는 태그 : 제목 셀을 나타내는 태그 : 셀을 나타내는 태그 하나의 은 하나 이상의 로 이루어져 있으며, 은 셀을 나타내는 , 를 자식으로 가지게 됩니다. 표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다. HTML 삽입 미리보기할 수 없는 소스 테이블을 어떻게 만드는지 외울 필요는 없지만, 구글링해서 만들 정도로 공부하면 된답니다~!

는 문서에 이미지를 삽입하는 태그로, 닫는 태그가 없는 빈 태그 입니다. src 속성 의 필수 속성으로 이미지의 경로를 나타내는 속성입니다. 상대경로는 현재 웹 페이지를 기준으로 상대적으로 이미지의 위치를 나타내는 경로이다. ./ 현재 페이지가 있는 폴더를 나타낸다. ../ 상위 폴더로 한번 이동하는 명령 하위폴더/이미지명 절대경로는 실제 그 이미지가 위치한 곳의 전체 경로입니다. alt 속성 이미지의 대체 텍스트를 나타내는 속성입니다. 대체 텍스트는 이미지를 대체하는 글을 뜻하며, 웹 접근성 측면에서 중요한 속성입니다. src 속성과 더불어 반드시 들어가야 하는 속성입니다. width/height 속성 이미지의 가로/세로 크기를 나타내는 속성입니다. 값의 단위는 필요하지 않으며, 값을 입력하면 자동으로..

텍스트를 꾸며주는 요소 : bold 태그는 글자를 굵게 표현하는 태그입니다. : italic 태그는 글자를 기울여서 표현하는 태그입니다. ( HTML5 버전에서는 의미를 가지는 태그) : underline 태그는 글자의 밑줄을 표현하는 태그입니다. : strike 태그는 글자의 중간선을 표현하는 태그입니다. (예전에 존재했던 strike 태그와는 다른 태그로, strike 태그는 폐기되어 더는 사용할 수 없습니다.) 앵커(anchor) 요소 (anchor 태그)는 a태그, 앵커, 링크 등 여러 이름으로 불립니다. 링크를 만들기 위해 는 반드시 href(hypertext reference) 속성을 가지고 있어야 합니다. href 속성의 값은 링크의 목적지가 되는 URL입니다. 네이버 HTML 삽입 미리보기..

HTML 태그 레퍼런스 https://developer.mozilla.org/en-US/docs/Web/HTML/Element http://html5doctor.com/element-index/ https://www.w3schools.com/tags/default.asp ⬆️ 사이트를 참고해서 수시로 공부하자. 모르는 것 있으면 여기서 확인해보기! 제목 태그 (heading) 제목(heading) 태그는 문서 내에 제목을 표현할 때 사용하는 태그입니다. 태그 이름은 heading을 줄여서 h로 쓰며, 제목의 레벨에 따라서 ~까지 있습니다. 보통 은 해당 페이지를 대표하는 큰 제목으로 주로 사용되며, 숫자가 올라갈수록 조금 더 낮은 수준의 소제목을 나타내게 됩니다. 하지만 현재 웹 페이지의 내용은 제목과 ..