본문 바로가기

전체 글

 (58)
css 개념 정리 기본적인 개념 CSS는 특정 HTML 태그를 가리켜 해당 태그를 꾸며주는 일이다. 이 때 가리키는 태그를 선택자(selector)라고 한다. 선택자 { 속성1: 값; 속성2: 값; } 위에서 보이는 코드처럼 선택자를 통해 HTML태그를 선택하고 해당 태그에 적용하고자 하는 속성과 그 값을 입력하면 된다. 파란색 25px h1 태그에 "파란색 25px" 이라는 문구를 작성하고 해당 태그를 선택하여 색과 글씨 크기를 변경해준 것이다. 적용 결과는 아래와 같다. 같은 태그에 CSS 속성 부여하기 CSS를 html문서에 적용하는 방법은 두 가지가 있었다. 2023.07.12 - [TIL/CSS] - css를 html에 적용하는 방법 css를 html에 적용하는 방법 1. html 파일에 css 코드를 추가한다...
의미는 없지만 기능은 존재하는 태그들 div 태그 div 태그는 division(분할, 구분, 경계선) 이라는 단어에서 나왔다. 따라서 div 태그를 사용하면 기존 태그들의 구분이 가능해진다. website website 위와 같이 작성된 코드는 아래와 같이 가로방향 한 줄로 표현이 된다. HTML 삽입 미리보기할 수 없는 소스 여기서 div를 활용하면 해당 input 태그들을 위 아래로 줄바꿈 해줄 수 있다. website website HTML 삽입 미리보기할 수 없는 소스 이렇듯 div 태그는 의미는 가지고 있지 않지만 기능은 가지고있는 태그이다. 이러한 태그를 non-semantic 태그라고 부른다. header, main, footer 태그 head라는 명칭이 들어가지만 head태그와는 다른 header 태그이다. 이 태그는 div..
input 태그와 함께하는 label 태그 label 태그는 input 태그와 함께일 때 동작한다. Profile Photo HTML 삽입 미리보기할 수 없는 소스 위와 같이 input 태그 없이 label 태그만 작성할 경우 클릭을 해도 아무런 이벤트가 일어나지 않는다. 여기서 input 태그가 추가되면 label 태그가 동작하게 된다. Profile Photo HTML 삽입 미리보기할 수 없는 소스 label 태그에 for 속성을 추가해주고 "profile"이라는 값을 주었다. 그 후 input 태그를 만들어 해당 태그의 id값을 동일하게 "profile"이라고 지정해주었다. 그 후 동작을 살펴보면 "Profile Photo" 라는 문구를 클릭했을 때 input 태그와 같은 동작이 이루어지는 것을 볼 수 있다. First Name HTML 삽..
input 태그의 여러 속성들 html에서는 여러 입력 가능한 요소들을 제공한다. 아래는 mdn 사이트에서 발췌한 html에서 제공하고있는 입력 요소들이다. 이 글에서는 그 중에서 input태그에 대해 다루어본다. type 속성 input 태그는 하나 또는 여러개의 type을 가질 수 있다. 기본적인 input 태그의 type속성 값은 "text"이다. 1. color type의 값으로 "color"를 주게 되면 아래와 같은 화면이 생긴다. HTML 삽입 미리보기할 수 없는 소스 검정색으로 표현된 네모칸을 클릭하면 색상을 선택할 수 있는 화면이 출력된다. 2. password type의 값을 "password"로 주게 되면 입력한 값이 점으로 표시되는 인풋창을 볼 수 있다. HTML 삽입 미리보기할 수 없는 소스 3. submit t..
html 파일의 작성 규칙과 head html 파일을 작성할 때 몇 가지 지켜야하는 규칙이 있다. 이번 글에서는 해당 규칙에 대해 알아보고자 한다. 첫 번째 규칙 첫 번째 규칙은 바로 위의 문구를 가장 상단에 작성하는 것이다. 이 문구의 뜻은 "이 파일은 일반적인 텍스트가 아니라 html 문서이다." 라는 것을 브라우저에게 알려주는 것이다. 두 번째 규칙 두 번째 규칙은 html 태그를 작성하고 해당 태그 안쪽에 작성하는 내용들이 html의 content라는 것을 표시한다는 것이다. 여기서 html 태그에는 lang 속성을 사용할 수 있다. 해당 속성을 사용하게 되면 구글, 빙 등의 검색엔진에게 해당 html파일의 주된 언어가 영어인지, 한국어인지 확인시켜줄 수 있다. 세 번째 규칙 세 번째 규칙은 head와 body를 사용한다는 것이다. ..
img 태그와 src 속성 img 태그의 특징 태그는 이나 태그와 다른 점이 하나 있다. 바로 닫힘태그가 따로 없다는 것이다. Go to google.com 위와 같이 태그나 태그의 경우 및 로 닫히는 태그를 표시해주고 있다. 하지만 태그의 경우 다음과 같이 닫힘 태그가 없다. 그 이유는 바로 img 태그가 "self-closing tag" 이기 때문이다. self-closing tag란 "자체 닫기 태그"를 뜻한다. a 태그나 h1 태그와 달리 img 태그에는 사이에 들어가는 content가 없다. 들어가야할 text가 없이 img 태그는 그 자체로 이미지를 나타내기 때문이다. src 속성 img 태그 역시 a 태그의 href나 target 속성과 마찬가지로 속성을 가지고 있다. 그 중 src 속성은 img 태그에 집어넣을 이미..
a 태그와 속성들 태그란? 태그에서 a 는 anchor를 뜻한다. anchor는 닻이라는 뜻이다. 태그는 link를 생각하면 되고 해당 태그를 통해 다른 웹사이트로 이동할 수 있게 된다. 태그의 사용 태그는 다음과 같이 사용할 수 있다. Go to google.com 이렇게 하면 아래와 같은 문구를 확인할 수 있다. 하지만 위의 문구를 누르면 아무런 반응도 일어나지 않는다. 태그는 등의 title을 뜻하는 태그와 달리 부가적인 정보를 필요로 한다. 이런 부가적인 정보는 attributes(속성)이라고 한다. 속성은 태그의 이름을 작성한 후 띄어쓰기를 해 주고 추가하는 형태로 그러한 속성 중 하나가 바로 "href" 이다. href 속성 태그의 중요한 속성 중 하나인 href는 "HTTP reference" 혹은 "hype..
css를 html에 적용하는 방법 1. html 파일에 css 코드를 추가한다. css를 html에 적용하는 첫 번째 방법은 바로 head 태그 안에 style 태그를 만드는 것이다. style 태그 안에 적용하고자 하는 css 코드를 추가하면 html에 css가 적용된 상태를 확인할 수 있다. 이 방법으로 CSS를 사용하는 것을 inline CSS라 한다. 2. css 파일을 html 파일에 주입한다. 위의 코드는 "style.css" 라는 파일명을 가진 css 파일을 주입한다는 뜻이다. 이 때 rel 속성을 적어주는데 이는 해당 html 파일과 style.css 파일간의 관계를 설명해주는 부분이다. style.css 파일은 html 파일과 stylesheet 관계를 맺는다는 것이다. 이 방법은 external CSS라고 부른다. 1번..

티스토리툴바