본문 바로가기

코딩 노트/HTML, CSS

 (8)
[HTML] 폼 태그 - 사용자 정보 입력받기 폼태그 웹 브라우저에서 데이터를 입력받아 서버로 전송한다. , , , 이 있다. 1. - 다양한 정보 입력받기 태그는 type 속성을 다르게 지정해서 다양한 입력 형태로 만들 수 있다. 태그를 함께 사용하여 폼 요소에 입력받을 내용이 무엇인지 나타낸다. type 종류 text 아이디 password 비밀번호 checkbox 태그에 value 속성을 추가하면 선택한 체크 박스의 value 값을 서버로 전송할 수 있다. 좋아하는 아이스크림 회사 하겐다즈 베스킨라빈스 31 나뚜루 radio 각 태그 속성에 name 값을 똑같이 입력하면 사용자는 값을 하나만 택할 수 있다. 직업 프론트 엔드 백엔드 UI/UX file 첨부 파일 color 색상 선택 date 날짜 선택 submit / reset submit 속..
[HTML] <span> - 인라인 요소 태그 그룹화 인라인 요소 태그에는 , , , 등이 있다. 도 인라인 요소인데, 다른 인라인 요소를 그룹화한다. (+ 인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지한다.) 태그와의 차이점 태그는 모든 요소를 그룹화할 수 있지만, 태그는 인라인 요소만 그룹화할 수 있다. 코드 내 티스토리 링크를 눌러 주세요 결과 인라인 요소 목록은 아래 페이지를 참고하자 https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements 인라인 요소 - HTML: Hypertext Markup Language | MDN HTML(Hypertext Markup Language)의 요소는 역사적으로 "블록 레벨" 요소와 "인라인" 요소로 분류됐습니다. 인라..
[HTML] <a> 태그 - 웹 페이지에 링크 연결 웹 페이지로 바로 이동할 수 있도록 링크를 만들어 준다. 내 티스토리 만약 새로운 탭을 열어서 링크 이동을 하려면, target 속성을 추가로 입력해야 한다. 내 티스토리
[HTML] <strong>, <em> - 특정 단어 강조하기 특정 문장이나 단어를 강조하고 싶을 때는 , 를 사용한다. 으로 감싼 글씨는 굵은 글씨로, 으로 감싼 글씨는 기울인 글씨로 표현된다. 코드 Lorem ipsum dolor sit amet. 결과 스크린 리더기에서의 역할(웹 접근성 관련) 스크린 리더기가 웹 문서를 읽을 때, , 으로 감싼 문장이나 단어는 좀 더 강한 억양으로 읽어준다. 텍스트를 굵게 하거나 기울이는 것은 CSS에서도 가능하다. , 태그는 특정 문장을 강조해 읽는 용도로 사용한다는 점을 기억하자. + VSC에서 lorem ipsum 팁 lorem10 이런 식으로 lorem 끝에 숫자를 붙여주면, 그 수만큼의 단어로 lorem ipsum을 만들어준다.
[HTML] 시맨틱 태그(Semantic tag) 시맨틱 태그 웹 문서의 머리말, 본문, 콘텐츠, 꼬리말 영역을 구분하는 태그. 웹 브라우저가 웹 문서를 효율적으로 읽을 수 있게 해준다. 종류 설명 머리말 영역(로고, 메뉴 등) 링크 영역(링크를 포함한 메뉴 그룹화) 멀티미디어(동영상, 사진 등) 콘텐츠 그룹화 본문, 중요한 콘텐츠를 담는 영역(주 콘텐츠 영역) 본문과 연관성이 적은 외부 영역(부가 콘텐츠 영역) 특정 영역을 그룹화(연관성 있는 콘텐츠 여러개 그룹화) 기사 혹은 개별 콘텐츠 영역(특정 기사의 미리 보기, 썸네일, 제목, 본문 등) 꼬리말 영역(기업 주소, 연락처, 약관 메뉴 등)
[CSS] float 속성 float 속성 float 속성은 객체를 띄워서 오른쪽이나 왼쪽으로 정렬할 때 사용하는 속성이다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용한다. ※ 절대 위치 속성은 float 속성을 무시한다. 다음은 'img태그'에 float을 설정한 예시이다. 1. float 속성 적용 전 float 속성을 적용하기 전에는 이미지 바로 옆에 글자가 따라 나온다. 2. float: left 설정 후 float: left를 설정하면, 이미지를 감싸듯이 텍스트가 정렬된다. 3. float: right 설정 후 이미지가 오른쪽으로 정렬되고, float: left를 적용한 것과 같이 텍스트가 이미지를 감싼다. clear 속성 float을 사용했을 때, 텍스트..
[CSS] 그리드(Grid) 시스템 그리드(Grid) 시스템 콘텐츠를 행과 열에 배치하는 2차원 레이아웃 시스템. 그리드 시스템은 반응형 웹사이트에 아주 적합하다. 가장 최신의 레이아웃 기술이며, 현대의 웹앱에 최적화되어 있다. 그렇기에 기존의 Table이나 Float 레이아웃 방식으로 만들기 힘든 구조도 쉽게 만들어 낼 수 있다. 그리드 레이아웃이란? 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 하나의 그리드는 columns, rows로 구성된다. 그리드 시스템의 기본 요소 그리드는 칼럼(Column), 거터(Gutter), 마진(Margin) 세 가지 요소로 구성된다. ① 칼럼(Columns) 컨텐츠를 포함하는 부분을 칼럼이라고 한다. 칼럼의 넓이는 고정된 값으로 제공되며, 1개..
[HTML, CSS] html 작업 시 이미지 파일 공백 제거 방법 HTML로 레이아웃 설정을 하다보면, DIV태그 안이나 P태그 안에 이미지가 있는 경우, 태그에 margin: 0; padding: 0; 을 설정했음에도 1 ~ 5px 의 공백이 생긴다. 발생 이유 HTML 태그는 크게 블록 요소(Block element)와 인라인 요소(Inline element)로 나누어진다. 그 중 태그는 인라인 요소이다. 인라인 요소를 사용하면 보이지 않는 라인 박스가 생성된다. 이 박스 안의 내용을 수직 정렬할 때는 두 가지 방식이 존재한다. ※ 인라인 요소의 수직 정렬 - 비표준 모드(IE7이하, doctype 선언 X): 박스의 border bottom에 맞춰 정렬 - 표준 모드(doctype 선언 O): baseline에 맞춰 정렬 표준 모드에서는 아래에 살짝 공백이 생기는..

티스토리툴바