본문 바로가기

Learn HTML

[HTML 독학 #6] Paragraphs 관련 태그 정리 01. 태그에 대해서 배워보자 오늘 배워볼 태그는 바로 태그인데요. p 태그는 paragraphs의 약자입니다. p 태그를 사용하실 땐 꼭 새줄에서 시작해야하며, 한번 사용 하면 텍스트들을 묶는 블록이 됩니다. 태그 같은 경우 아래와 같이 코드 상 줄을 바꾸거나 여백을 심하게 넣는다고 하더라도, 브라우저가 페이지를 표시할 때 공백과 줄을 제거하기 때문에 효과를 볼 수 없습니다. 위 예시의 결과값은 아래와 같은데요. 코딩 상 컨텐츠의 줄을 바꾸거나 띄어쓰기를 심하게 넣어도, 결과값은 아래와 같습니다. 02. 태그에 대해서 배워보자 태그와 함께 많이 사용하는 태그는 바로 태그가 있는데요. 태그는 줄바꿈을 할때 사용하는데요. 브라우저는 삽입된 태그를 기준으로 줄을 바꿔줍니다. 위 예시를 보면, 태그 안에 태그.. 더보기
[HTML 독학 #5] HTML Headings 태그 정리 HTML 제목태그인 ~태그는 웹페이지에서 제목을 나타내는 태그입니다. 태그는 아래와 같이 숫자가 커지면 커질수록 제목 폰트의 사이즈가 작아지는데요. 은 중요한 제목에 사용을 해야하며, 그 다음 중요한 순서대로 ,을 차례대로 쓰시면 됩니다. HTML 태그는 아래와 같이 사용가능한데요. 검색 엔진에서는 문서를 검색할 때 제목태그를 통해 글의 맥락을 이해하고, 이를 구조화합니다. 그렇기 때문에 제목 태그를 적절히 사용하는게 검색 엔진 최적화에 도움이 됩니다. 지난시간에 배웠던 style 속성을 통해 태그를 기존보다 더 크게 만들수도 있는데요. style 속성에 폰트 사이즈를 아래와 같이 기입을 해두면 폰트 사이즈가 60px로 맞춰집니다. 더보기
[HTML 독학 #4] HTML 속성(Attribute)란? 모든 HTML 요소들은 속성을 갖을 수 있는데요. HTML 속성(Attribute)은 요소들에게 추가 정보를 제공합니다. 또한 모든 속성은 시작태그에만 붙일 수 있고, 종료태그에는 붙일 수 없습니다. 아래 예시를 살펴볼까요? 태그에는 href라는 속성이 붙습니다. 해당 속성은 클릭 시 어느 페이지로 이동할지에 대한 URL를 적어두는곳인데요. 기본적으로 모든 속성들은 웹페이지에서 눈으로 보이진 않습니다. 태그는 HTML에 이미지를 삽입할 때 사용하는 태그입니다. 태그와 함께 src 속성이 사용되는데요. src 속성에는 삽입하고 싶은 이미지의 경로를 집어넣습니다. 이 밖에 태그는 width와 height 속성을 추가로 붙일 수 있는데요. 해당 속성을 통해 이미지의 가로 세로 사이즈를 조절 가능합니다. sty.. 더보기
[HTML 독학 #3] HTML 요소(element)란? HTML은 요소가 있는데요. 요소는 스타트태그부터 끝마침 태그까지를 모두 포함하는것입니다.(시작 태그부터 종료태그까지 한 묶음) 요소는 총 5가지로 나뉘는데요. 그 내용은 아래와 같습니다. 컨텐츠 1.시작태그(2.속성이름, 3.속성값) 4.내용 5.종료태그 (주의할점 : 일부 HTML 요소에는 컨텐츠 자체가 없는 경우도 있는데요. 컨텐츠가 없는 태그는 종료태그 또한 없습니다.) 이러한 요소들은 서로가 서로안에 포함될 수 있는데요. 아래 이미지를 보시면 태그 안에는 태그가 포함되어 있고요. 태그안에는 ,태그가 포함되어 있습니다. 태그를 볼까요? 태그는 종료태그인 태그안에 'My Fist Heading' 이라는 컨텐츠를 포함하고 있습니다. 때로는 html 태그는 컨텐츠를 포함하고 있지 않은 경우도 있는데요... 더보기
[HTML 독학 #2] HTML 기본형식 공부하기 HTML은 기본적으로 시작 할땐 을 선언해주어야합니다. 이렇게 선언해주는 이유는 브라우저에게 해당 웹페이지가 어떤 버전의 HTML 언어인지 설명해주기 위해서입니다. 브라우저에게 선언을 해주면, 문서간 호환성이 올라가는데요. HTML도 버전에 따라 삭제된 태그가 있고, 적용 되지 않는 태그들도 있기에 꼭 을 선언을 해주어야합니다. ~태그 HTML은 제목 글씨를 쓸땐 꼭 ~태그를 쓰는데요. 해당 태그는 중요한 제목이나 헤드라인을 쓸때 사용됩니다. ~처럼 뒷 숫자가 커질수록 글씨의 크기는 줄어듭니다. 태그 그 다음으로는 단락인데요. 문장은 단락으로 구성되어있죠. HTML은 단락을 쓸때 태그를 사용합니다. 사용방법은 아래와 같이 contentes 형식으로 쓰면 됩니다. 태그 HTML은 다른 페이지로 링크를 걸수.. 더보기
[HTML 독학 #1] HTML 태그 구성 디자이너와 코딩은 뗄레야 뗼 수 없는 관계가 아닐까합니다. 디자이너가 코딩을 어느정도 할줄 알면, 추후 회사 선택의 폭이 굉장히 넓어지기 때문에 개발까진 아니여도, 디자이너 혼자서 홈페이지 유지보수 정도는 할줄 알아야한다고 생각하는데요. 기본적으로 디자이너는 HTML, CSS, 자바스크립트 정도만 할줄 알면 된다고 생각합니다. 오늘부터 HTML부터 CSS, 자바스크립트까지 디자이너 알아야 하는 코딩지식에 대해서 하나씩 설명드릴텐데요. 천천히 설명드릴테니까 저와 함께 코딩의 세계로 들어가보시죠! [HTML 배워보자] HTML은 웹페이지를 구성하는 프로그래밍언어인데요. 우리가 지금 보고 있는 모든 웹페이지들은 HTML로 구성되어있습니다. 기본적인 HTML 형식은 아래와 같습니다. (예시 1) TEST 지금은.. 더보기