Web Programming/HTML & CSS 썸네일형 리스트형 [학습 2] HTML 텍스트 요소 다루기 HTML 텍스트 요소 다루기안녕하세요! HTML/CSS 학습 시리즈의 두 번째 글입니다.지난 시간에는 HTML의 기본 개념과 구조에 대해 알아보았는데요, 오늘은 웹 페이지에서 텍스트를 표현하는 다양한 HTML 요소들을 배워보겠습니다.제목 태그 ( ~ )HTML에서는 6단계의 제목 태그를 제공합니다. 이 가장 중요하고 큰 제목이며, 으로 갈수록 중요도와 크기가 작아집니다.가장 중요한 제목 (h1)두 번째 수준 제목 (h2)세 번째 수준 제목 (h3)네 번째 수준 제목 (h4)다섯 번째 수준 제목 (h5)여섯 번째 수준 제목 (h6)제목 태그는 단순히 텍스트 크기를 조절하는 용도가 아니라 문서의 구조와 의미를 정의하는 중요한 역할을 합니다. 검색 엔진은 이 제목 태그를 통해 페이지의 주요 내용을 파악하므로 .. 더보기 [학습 1] HTML 소개와 기본 구조 HTML 소개와 기본 구조안녕하세요! 오늘부터 새롭게 시작하는 HTML/CSS 학습 시리즈의 첫 번째 글입니다.먼저 HTML 기초 1단계로 체계적이며 단계별 학습을 하기 위한 첫걸음으로, HTML의 기본 개념과 구조를 알아보겠습니다.HTML이란 무엇인가?HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 웹 브라우저는 이 HTML 코드를 읽고 사용자에게 시각적인 웹 페이지로 표현해 줍니다.주요 특징:마크업 언어: 프로그래밍 언어가 아닌 문서의 구조를 정의하는 언어태그 기반: 꺾쇠 괄호()로 둘러싸인 요소들로 구성계층적 구조: 요소들이 서로 중첩되어 부모-자식 관계를 형성 웹 페이지의 기본 구조모든 HTML 문서는 다음과 같은 기본 구조를 가집니다.. 더보기 HTML 문서에 <img> 태그로 이미지 띄우기 HTML을 작성하다가 이미지를 띄우는 경우가 많습니다. 이럴 때 사용하는 태그가 태그입니다. 이번에는 태그 사용방법에 대해 알아보고 예제를 통해 확인해 보겠습니다. HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기 HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기 일반적으로 태그는 여는 태그와 닫는 태그가 함께 쓰입니다. 그리고, 태그를 사용하여 텍스트, 이미지, 멀티미디어 콘텐츠를 HTML 문서로 나타내는 것을 마크업(Markup)한다고 합니다. 이 이유로 하 mr-johndoe.tistory.com 1. 태그 태그는 자신의 컴퓨터 하드에 저장되어 있는 이미지 파일을 HTML 문서에 띄울 때 사용하며 닫힘 태그가 없습니다. 사용 방법은 다음과 같습니다. 파일명에는 이미지로 올리고자.. 더보기 HTML 제목 및 문단 태그와 특수문자 입력에 대해 알아보기 일반적으로 태그는 여는 태그와 닫는 태그가 함께 쓰입니다. 그리고, 태그를 사용하여 텍스트, 이미지, 멀티미디어 콘텐츠를 HTML 문서로 나타내는 것을 마크업(Markup)한다고 합니다. 이 이유로 하이퍼텍스트(Hypertext)를 마크업하는 언어라는 의미의 HTML(Hyper Text Markup Language)이란 이름이 지어졌습니다. 이번에는 HTML에서 쓰이는 태그에 대해 알아보고 주석 및 특수문자 입력하는 방법에 대해 알아보겠습니다. 1. HTML 기본 구조 다음은 HTML의 기본 형식입니다. 는 HTML5 문서 규격인 HTML 문서임을 표시하는 태그입니다. 과 은 HTML 문서에는 반드시 들어가는 태그로 이 태그 안에 모든 내용이 들어가야 합니다. 그리고, 와 는 태그안에 기본적으로 들어가는.. 더보기 font - 구글 웹폰트 사이트에 올라온 폰트 사용하는 방법 웹 페이지 글자 모양 설정을 위한 font 웹 페이지에 글자를 기본 폰트로 하기에는 밋밋한 경우 이미지로 만들어서 올릴 수도 있지만 구글 웹폰트 사이트에 올라온 폰트로 꾸밀 수 있습니다. 우선 구글 웹폰트 사이트 https://fonts.google.com/에 접속합니다. 첫 화면에서 좌측 위쪽에 Language라는 버튼이 보입니다. 그것을 클릭하여 아래로 내리면 Korean 항목이 보입니다. Korean을 클릭하면 화면에는 한글 폰트들이 보일 것입니다. 원하는 폰트가 보이시면 클릭을 합니다. 저는 아래쪽 'Do Hyeon'이라는 폰트를 클릭해보겠습니다. [그림 3]에서 빨간색 원으로 표시된 '+ Select this style'을 클릭하면 [그림 4]와 같이 화면 우측에 'Selected family'.. 더보기 mediaquery 반응형 웹 디자인을 위한 mediaquery 인터넷을 사용하거나 모바일을 사용할때 화면의 크기는 사용자마다 제각각 다를 것입니다. 컴퓨터를 사용할때는 해상도나 웹브라우저 크기를 조정하여 사용함에 따라서 달라지고, 모바일의 경우에는 제품마다 그 크기가 달라서 이에 맞춰 웹디자인을 하기는 힘듭니다. 이를 위해 CSS에서 mediaquery를 이용하여 이 문제를 해결할 수 있도록 제공합니다. 사용방법은 다음과 같습니다. @media ( 화면폭 ) { 실행 내용 } 화면폭에는 화면크기의 폭을 설정합니다. 속성은 다음과 같습니다. max-width : 화면 최대 폭 설정 min-width : 화면 최소 폭 설정 @media를 사용할때 모바일 중심으로 디자인할 것인지 아니면 컴퓨터 중심으로 디자인할 것인지를 결정하.. 더보기 animation 간단한 움직임을 만드는 animation animation은 자동으로 요소를 움직이게 하는 속성입니다. animation 속성은 @keyframes 속성과 함께 사용됩니다. @keyframes 속성은 요소 움직임의 처음부터 마지막까지를 정의합니다. 사용방법은 다음과 같습니다. 1. @keyframes 속성 @keyframes ani이름 { 0% {요소의 animation 시작할 때의 설정} : n% {전체 animation 시간중 n% 진행됐을때 실행될 내용 설정} : 100% {요소의 animation 끝날 때의 설정} } 2. animation 속성 animation: ani이름 시간 진행속도 지연시간 반복횟수 방향지정 ㄱ. ani이름 : @keyframes에 정의된 이름을 말합니다. ㄴ. 시간 : .. 더보기 transition 시간을 조절하여 여러가지 움직임 효과를 주는 transition transition은 cubic-bezier() 속성을 사용하여 움직임에 변화를 주어 좀더 다이나믹하게 화면에 움직임을 주고자 할때 사용합니다. 사용방법은 다음과 같습니다. transition : 적용하고자 하는 속성 진행속도 지속시간 지연시간 1. 적용하고자 하는 속성 HTML내에서 transition기능을 적용하고자 하는 속성을 지정합니다. 사용할 수 있는 속성 - none : 모든 속성에 적용하지 않음. - all : 모든 속성에 적용함. - 속성 : 해당 속성에 적용함. 여러가지 속성에 적용하려면 콤마로 구분하여 작성. - initial : 기본값으로 설정함. - inherit : 부모 요소의 속성값을 적용함. 2. 진행속도 움직임의.. 더보기 이전 1 2 다음
아무개의 취미생활
