TIL/HTML 5

[TIL] HTML ㅡ div / span 태그의 차이점

특정 구역이나 구획을 분할해주는 & 태그 ! 두 태그가 HTML 내에서 비슷한 역할을 한다 의미가 없는 태그이기 때문에 nav, article등이 아닐 때.. 무언가 적절한 태그를 주기 어려울 때 이 의미 없는 두가지 태그를 보통 많이 사용한다 또한 그룹화를 위해 사용하며, 스타일링 (css)을 일관적으로 적용하려는 목적이 큰 태그들이다 그렇다묜 두 태그의 차이점은 무엇일까? 는 "블럭요소" 은 "인라인요소" 아래화면을 보시면 이해가 더 쉽습니당 핑크색 부분은 div 태그를 사용한 것이라 박스 형태로 영역이 설정되어 있고 그 안에 문장들이 배열된다 하늘색 부분은 span 태그를 사용한 것이라 줄 단위로, 개별적으로 영역이 설정되어 있다 때부분 텍스트를 꾸밀 땐 span으로 묶어서 사용해 준답니다 div ..

TIL/HTML 2022.11.12

[TIL] HTML - <b> 와 <strong> 태그의 차이

와 태그는 모두 텍스트를 굵게 만들어 주는 요소이다 그러나 스크린리더(화면 낭독기)에서 두 태그의 차이점이 드러난다 정말 단순하게 텍스트를 굵게 표시하는 역할만을 하고 단순하게 보여지는 강조가 아닌, 실제 페이지 내의 중요한 부분을 알려주는 역할을 한다 스크린 리더 사용시 태그가 들어간 부분은 강한 억양을 사용하여 읽어 준다 이는 웹 접근성에 큰 기여를 하기 때문에 두 태그를 꼭 선별하여 사용해 주어야 한다 & 태그도 글씨를 기울임체로 표현해 주는 동일한 역할을 하지만, 위와 같이 웹 접근성에 대한 기여가 전혀 다르기 때문에 주의해서 사용해 주어야 한다 !

TIL/HTML 2022.11.08

[TIL] HTML - Block & Inline

Block - 블록요소는 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지한다 (부모 요소의 전체 공간을 차지 한다) - 상자를 아래로 쌓는다고 생각하면 간단 ! - div, h1, p 태그가 있음 Inline - 인라인 요소는 바로 이전 요소가 끝나는 지점부터 시작하며, 요소의 내용(content)만큼만 크기를 갖는다 - 인라인 요소는 블록 요소를 포함할 수 없다 - span, img, a, strong 태그가 있음 아래 그림을 보면 이해하기가 쉽고, VS code에서 직접 코드를 쳐보면 바로 이해가 되어요 블록요소를 갖는 태그 (대표적으로 div), 인라인요소를 갖는 태그 (대표적으로 span)를 각각 작성해 주고 background-color를 지정해 주면 한 눈에 비교가 된다 박스1은 bloc..

TIL/HTML 2022.11.07

[TIL] HTML ㅡ table 만들기

🌷Web에 Table로 표 만들기 HTML에서 표를 만들어주는 태그에 대해 공부해 볼게요 오늘 😎 테이블을 구성할 때는 거의 아래 네개의 태그를 사용해 줍니다 : 테이블 자체를 만드는 태그 : 테이블의 헤더부분을 만드는 태그 : table row 라고 하며, 태이블의 행을 만드는 태그 : table data 라고 하며, 테이블의 열을 만드는 태그 VS code에 요런 코드를 쳐주면 아래와 같은 표가 완성 됩니다 헤더부분에 넣어준 일정, 준비물의 경우 스스로 bold체로 표시되는게 다른점인듯 HTML에서 꾸며줄 때는 이런식의 코드를 작성해 주면 되는데, 살짝 촌스러운 감이 있어서 저는 포스팅을 위해 CSS로 스타일을 조금 가미해 주었습니다 테이블 디자인을 변경할 때는 아래 속성들을 사용하면 되고, tabl..

TIL/HTML 2022.09.19

[TIL] HTML/CSS 이력서 만들기

🌷 멋사 탈락 기념으로(?) 인터넷 무료강의 수강권을 주셔서 HTML/CSS 수업을 들었다 강의 내용은 HTML/CSS 로 이력서 만들기 !! 기본적인 HTML 내용들을 설명해 주면서 CSS를 곁들여 꾸밀수 있도록 유도해 주시는 강의인뎅 , 마침 딱 디자인적으로 딱 내가 좋아하는 스타일이어서 추후에 여기에 이것저것 갖다 붙여서 실제 이력서로 사용해 보려 함당 헤헤 완성 된 이력서를 첨부해 볼게요 디테일한 부분들은 예시랑 동일하게 우선 작성했고, 강의에서는 오른쪽 하단에 인스타그램/페이스북/트위터 등등의 이미지를 넣었지만 나는 구글 폰트에서 아이콘을 다운 받아 넣었다 왜냐? 그냥.. 귀여워성.. ^__^ 아이콘이랑 네이버/티스토리 블로그가 연동되도록 링크도 넣었답니다. 제법 재밌고 즐거웠던 이력서 만들기 😎

TIL/HTML 2022.09.07