본문 바로가기
반응형

IT/HTML & CSS & JavaScript47

HTML 글씨(문자) 색상 변경 - color, RGB, 16진수 이번시간에는 style 속성으로 문자의 색상을 변경하는 3가지 방법에 대해서 알아보겠습니다. 1. 이름으로 표현하기 color 속성에 색상명을 영어로 표기하는 방법입니다. 무지개 색깔인 7가지 색상만 적어두었지만 yellowgreen 같은 다양한 생상들을 지원하고 있습니다. 빨간색 주황색 노란색/h1> 초록색 파랑색 남색 보라색 2. RGB로 표현하기 모니터, 스마트폰 등 스크린은 색상을 표현할 때 빨간색,녹색,파란색을 혼잡하여 표현합니다. HTML에서도 동일하게 사용이 가능한데요. 색상의 범위는 각각 0~255까지의 범위를 가지고 있습니다. RGB 빨간색 RGB 파란색 3. 16진수로 표현하기 RGB 색상값을 각각 16진수로 변환한 것입니다. 각각의 기본색(Red, Green, Blue)은 각각 00부.. 2021. 8. 26.
HTML 스타일(style) - 글자 크기 & 문단 정렬 / 다중 스타일 이번시간에는 HTML의 스타일(style) 사용하여 문자의 크기를 변경하는 방법과 문단을 오른쪽 왼쪽 센터로 정렬하는 방법에 대해서 알아보겠습니다. HTML에서 style속성을 사용하게되면 CSS 스타일을 직접 요소에 적용하는 것이 가능집니다. 대신 이런 방법은 하나의 HTML 요소에만 적용되어 집니다. 문법 : 1. 글자 크기 변경 font-size 속성을 사용하게 되면 문자의 크기를 변경할 수 있습니다. 문자의 크기를 2배로 문자의 크기를 3배로 문자의 크기를 4배로 2. 문단 정렬 변경 text-align 속성을 사용하면 문자를 가운데, 왼쪽, 오른쪽 방향으로 정렬이 가능합니다. 문자 가운데 정렬 문자 왼쪽 정렬 문자 오른쪽 정렬 3. 여러(다중) 스타일의 설정 Style에는 여러개의 속성 지정이 .. 2021. 8. 26.
HTML 주석처리 방법(문법) HTML 주석처리 방법(문법) 이번 시간에는 HTML 주석을 처리하는 방법에 대해서 알아보겠습니다. HTML 에서 주석을 사용하는 이유는 작성한 코드에 대해서 추가적인 설명을 작성해두거나 디버깅을 위해서 작성한 구문이 동작하지 않도록 하기 위해서 사용합니다. 문법 : 단일 주석처리 주석 처리를 테스트 1 주석 처리를 테스트 2 다중 주석 처리 주석 처리를 테스트 1 이상으로 HTML 주석처리하는 방법에 대해서 간단히 알아보았습니다. 2021. 8. 26.
HTML 서식태그 - 텍스트 효과 (b, strong, ,mark, del, ins,sup,sub, i, em,) 이번 시간에는 html의 글자 서식을 변경해주는 다양한 태크들에 대해서 알아보겠습니다. 1. 강조효과 태그와 태그는 문자를 굵게 표시하기 위해서 사용합니다. 육안으로 보기에는 차이가 없지만 태그는 중요한 내용이라는 의미를 자신이나 or 개발자 or ㅇ 알려주기 위해서도 사용됩니다. "굵은 글씨 부분" : 단순히 굵게 표현 "굵은 글씨 부분" : 중요한 부분이라 굵게 표현 문자를 이텔릭체로 표현하고 싶다면 , 태그를 사용하세요. 마찬가지로 육안으로 보기에는 차이가 없지만 태그는 중요한 내용이라는 의미를 포함하고 있습니다. "이텔릭체" : 단순히 이텔릭체 표현 "이텔릭체" : 중요한 부분으로 이텔릭체 표현 2.하이라이팅 효과 태그는 문자 텍스트에 하이라이팅 효과를 부여합니다. "하이라이팅" : 하이라이팅 효.. 2021. 8. 26.
HTML 줄바꿈 태그- 단락 나누기(p, br, pre, hr) 이번 시간에는 html의 글자 사이에 단락을 만들어 줄을 바꿈으로써 문장을 구분하는 방법에 대해서 알아보겠습니다. 1. 태그 p 태그는 기본적인 단락을 만들어주는 기능을 합니다. p 태그를 사용하게되면 문장 위쪽과 아래쪽에 약간의 여백이 생기게 됩니다. HTML 코드에서 띄어쓰기나 줄을 변경하려고 아래와 같이 입력하여도 화면에서는 한번의한 번의 띄어쓰기와 한 번의 줄 바꿈으로 인식하니 주의하세요. 1 단락입니다. 위아래로 약간의 여백이 들어갑니다 2 단락입니다. 위아래로 약간의 여백이 들어갑니다 3 단락입니다. 위아래로 약간의 여백이 들어갑니다 2. 태그 br 태그는 단락을 나누는 기능을 수행합니다. 종료 태그가 없으며 문장의 끝에 단독으로 사용합니다. 줄 바꿈 코드 작성 1 줄 바꿈 코드 작성 2 줄 .. 2021. 8. 25.
HTML 텍스트 요소 - 제목 크기(h1 ~ h6) 이번 시간에는 html의 제목의 크기를 표현하는 태그에 대해서 알아보겠습니다. HTML 제목 태그 문법 : 문장 제목1번의 크기 제목1번의 크기 제목1번의 크기 제목1번의 크기 제목1번의 크기 제목6번의 크기 태그는 가장 크기가 큰 부터 까지 표현이 가능합니다. 이 제목 태그는 단순한 크기를 표현하는 역할 뿐만 아니라 추가적인 중요한 역할을 하고있는데요. 네이버, 다음, 구글 등 다양한 검색엔진은 우리가 만든 웹사이트의 내용을 이 태그를 보고 키워드를 수집하여 글의 내용을 파악합니다. 따라서 문서 작성시 제목에 해당하는 내용은 다양한 검색 엔진이 쉽게 수집하게 하기위해서 태그로 작성하는 것을 권장합니다. 이상으로 HTML 텍스트 요소 중 제목의 크기를 결정하는 ~ 태그에 대해서 알아보았습니다. 2021. 8. 25.
HTML 기본 구조 & 개념 설명 HTML이란? HTML은 HyperText Markup Language의 약자로 웹페이지를 작성하는 언어입니다. 지금 보고있는 페이지도 HTML로 작성되어 있습니다. HTML은 다양한 정적인 페이지를 만들때 때 사용됩니다. (동적인 웹로직 작업을 구현하기 위해서는 자바스크립트를 사용해야합) HTML 기본구조 HTML의 기본구조는 크게 태그안에 와 태그로 나누어집니다. html : 문서의 루트 요소를 정의 head : 메타데이터를 정의 - 메타데이터란 HTML 문서에 대한 정보로 웹 브라우저에는 직접적으로 표현되지 않는 정보를이며 , , , , , 태그 등을 이용하여 표현할 수 있습니다. body : 웹을 통해서 보여지는 내용을 정의 위와 같이 HTML의 기본적인 문서를 작성하였을 경우 아래와과 같은 기본.. 2021. 8. 25.
반응형