한번 해보자 코딩

HTML 기본 문서와 관련된 태그 오늘은 HTML의 기본 문서와 관련된 태그들에 대해 알아보겠습니다. 우선 HTML요소는 요소와 요소로 구성되어 있습니다. 요소 안에는 , , , , 그럼 오늘 알아본 기본 텍스트 태그들로 제일 기본적인 문서 구성은 이렇게 만들어볼수가 있겠죠!? 이제 여기에 텍스트 관련 태그들을 추가로 써 넣으면 내용을 추가할 수가 있습니다. 간단하게 몇가지만 살펴볼게요! 태그명 태그의 의미 및 특징 ~ 제목 표시, 일반 텍스보다 진하고 크게 표시(1부터 6까지 크기다름) 단락 만들기 줄 바꾸기 or Bold, 진하게 컴퓨터 인식을 위한 소스 코드 [ HTML 예시 2 ] See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. 위의 [ H..

HTML 구조 관련 요소들(섹션관련태그정리) 오늘은 웹사이트 레이아웃 만들 때 필요한 구조 관련 요소들에 대해 알아보려고 합니다. 구조 태그를 이용한 마크업 시멘틱 태그를 사용하면 검색 효율성과 웹 접근성의 향상, 협업 측면에서도 더욱 유리합니다. [ 예시 사진 ] 일단 사진으로 먼저 살펴보면 이렇습니다 이렇게 레이아웃을 잡을 때 사용하는거에 따라 맞게 설정을 해 주어야 작업할때도 편리하겠죠? 그럼 하나하나씩 태그의 의미와 특징에 대해 알아보겠습니다. 구조 관련 요소 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 HTML문서의 헤더 영역을 의미, 제목, 네비게이션, 검색 등을 포함할 수 있음 텍스트, 인라인요소, 블록레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없음 HTML 문서에서 맥락..

텍스트 관련 요소

시멘틱 마크업과 논리적인 순서 마크업 우선 마크업이 무엇이고, 마크업의 기본 문법 규칙은 어떤 것이 있는지 먼저 알아보겠습니다. , 반응형웹 '반응형웹'이 HTML문서에서 제목으로 사용된다고 할 경우 [예시 1]처럼 마크업을 하면, 스크린 리더에서는 그저 '반응형웹'이라고만 읽어주기 때문에 그것이 제목인지 알 수가 없습니다. [예시 2] 반응형웹 이렇게 [예시 2]처럼 '반응형웹' 부분을 제목을 의미하는 태그로 바꾸어 마크업 해 주어야 이 부분이 제목인걸 알 수 있게 됩니다. [예시 3] 이렇게 [예시 2,3]처럼 의미에 맞게 마크업 해주는 것을 시멘틱 마크업 이라고 한다. 작업자마다 콘텐츠의 의미를 해석하는 차이가 있을 수 있지만 가급적 시멘틱하게 마크업 하려고 노력하는 것이 중요! 자, 그럼 이제 논..

블록(Block)구조와 인라인(Inline)구조에 대해 태그를 배우기 전에 알아두어야 할! 블록구조와 인라인 구조에 대해 정리해보려고 합니다! 우선, 블록구조에 대해 알아보겠습니다. 블록 레벨 요소 (Block-leverl Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. [블록 예제.html] 블록 레벨 요소 블록 레벨 요소 성질 줄 바꿈이 생깁니다. ​ [블록 결과.html] 이렇게 [블록 예제]에서 마크업 했던 , , 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈이 일어나는 것을 볼 수 있습니다. 이러한 블록 레벨의 기본 요소로는 제목 ~ , 문단 , 주소 가 있습니다. *특징 줄 바꿈이 일어난다. 텍스트(문..