본문 바로가기

728x90

전체 글

(254)
[HTML] 폼(Form) 사용해보기 폼(Form)이란?HTML에서 폼은 사용자가 데이터를 입력하거나 선택해서 서버로 전송 가능하게 만드는 UI 영역이다.즉, 회원가입 폼이나 로그인 폼 같은 사용자 웹서버 사이의 데이터 교환 통로라고 보면 된다.기본구조 안에 여러 입력 요소(, , 등)가 들어간다.사용자가 데이터를 입력하거나 선택하여 제출(submit) 버튼을 누르면, 의 action 속성에 지정된 주소로 데이터가 전송된다. 제출action: 데이터를 보낼 서버 주소method: 전송 방식 (GET: URL에 노출, POST: 본문에 숨김)여기를 참고하면 기본적인 코드 예시와 출력을 함께 볼 수 있다.주요 태그 정리태그역할입력 양식 전체를 감싸는 컨테이너텍스트, 비밀번호, 체크박스, 라디오 등 다양한 입력 필드 + 드롭다운 선택 리..
[CSS] grid 사용해보기 Grid란?CSS Grid는 2차원 레이아웃을 설계할 수 있게 해준다.앞선 Flexbox가 1줄(가로, 세로)에 중점을 둔 1차원 레이아웃이라면, Grid는 가로 + 세로를 동시에 제어가 가능하다.카드 배치, 포토폴리오, 관리자 페이지와 같은 그리드 구조를 요구하는 곳에 자주 사용된다.기본 구조Gird는 항상 부모 요소(Grid) 와 그 안의 자식 요소(Item) 로 구성된다. 1 2 3 4.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}Grid 축 이해하기위 이미지를 통해 차이점을 확인할 수 있다.Flexbox의 경우 가로, 세로 중 1방향만 선택할 수 있지만, Grid를 사용하면 제약을 벗어나 보다 자유롭게 레이아웃을 ..
[CSS] Flexbox 활용해보기 Flexbox란?CSS에서 수평, 수직 정렬을 쉽게 해주는 레이아웃 도구다.기존에 Flexbox가 없던 시절에는 position이나 float와 같은 방식을 사용했었다.하지만, 이것들은 사용하는데 제약사항이 존재했고 불편했다.Flexbox가 등장하면서 간결하고 직관적으로 레이아웃 배치, 간격 조절, 정렬과 같은 동작을 할 수 있게 되었다.기본 구조Flexbox는 항상 부모 요소(Container) 와 그 안의 자식 요소(Item) 로 구성된다. A B C.container { display: flex;}Flexbox의 축 이해하기Flexbox는 두 개의 축(수평, 수직)으로 이뤄져있다.구분설명예시주 축(Main Axis)요소가 나열되는 방향기본은 수평(row)교차 축(Cross Axis)주축과 수..
[멋쟁이사자] 백엔드 - 37일차 회고록 37일차학습 목표HTML의 시맨틱 태그를 활용하여 의미 있는 페이지 구조를 설계할 수 있다. ~ , , , , 등을 활용하여 텍스트와 리스트, 링크를 구성할 수 있다., , 등 기본 태그를 활용하여 실생활 페이지 구성을 시작할 수 있다.CSS 기본 선택자와 속성을 활용하여 텍스트, 배경, 레이아웃을 꾸밀 수 있다.HTML의 시맨틱 태그html은 간단하게 알고 있어서 footer, header 같은 개념만 알고 있었는데 이번 기회에 시맨틱 태그가 바로 이 footer, haeder와 같은 친구들이라는것을 알았다.그동안 시맨틱 태그란것도 모르고 그냥 html에 포함된 줄 알았는데 이번 학습을 통해 시맨틱 태그를 알게 되었고 다른 요소들도 학습하게 되었다.관련 내용은 블로그 글에 정리해뒀다.HTML의 기본..
[CSS] 기본 선택자와 속성 CSS란?HTML로 만든 구조에 디자인을 입히는 언어라고 생각하면 된다.CSS를 사용하면 웹사이트의 텍스트 색상, 폰트, 여백, 배경색, 레이아웃을 자유롭게 꾸밀 수 있다.기본 선택자CSS에서 기본 선택자를 사용하면 스타일을 적용할 대상을 선택할 수 있다.즉, 웹페이지에서 특정 부분만 선택해 원하는 스타일을 적용이 가능하다는 소리다.1. 태그 선택자특정 HTML 태그에 스타일을 적용시킨다.p { color: blue;}모든 태그가 파란색으로 표시된다.2. 클래스 선택자 (Class Selector)여러 요소에 공통 스타일을 적용시킨다..(점)을 붙여 사용한다..highlight { background-color: yellow;}강조된 문단입니다.강조된 박스입니다.한 문서에서 여러 번 사용할 수 있다..
[HTML] 시맨틱 태그 시맨틱(Semantic)이란?HTML5부터 새롭게 나타난 시맨틱 태그는 웹페이지의 구조를 의미 기반으로 표현하는것을 목표로 한다.웹 기술이 발전하면서 태그는 정보로서 높은 가치를 포함해야 한다는 점이 중요해지고 있다.기존에는 , 처럼 모양만 나누던 태그들로 페이지를 구성했다면, 시맨틱 태그는 "이 부분이 무슨 역할을 하는지"를 태그 이름 자체로 설명이 가능해졌다.왜 사용할까?1. 가독성 향상위 이미지를 보면 div로만 구상한것보다 시맨틱을 사용해 구분한게 가동성이 더 좋은게 확인된다.2. 유지보수 용이나중에 구조를 수정하거나 추가할 때 더 쉽고 안전하게 관리할 수 있다.3. 검색엔진 최적화(SEO)검색 엔진이 페이지 구조를 이해하고 검색 결과에 반영하는 데 유리하다.4. 웹 접근성 강화HTML의 시맨틱 ..
[HTML] 기본 태그들 기본 태그들HTML에서 기본 태그는 부분에 들어가서 본문을 구성하게 된다.텍스트 구성 ~ , , , 리스트 구성, , 링크 연결이미지 삽입표(테이블) 작성, , , , , 입력 폼 만들기, , , , 사용 예시텍스트 구성 태그제목 태그: ~ 숫자가 작을수록 제목의 크기가 커진다.가장 큰 제목두 번째로 큰 제목세 번째 제목문단 태그: 본문 내용을 묶을 때 사용한다.줄 바꿈 없이 하나의 문단 단위로 출력된다.이것은 하나의 문단입니다.문단은 p 태그로 구분합니다.참고) 줄 바꿈을 원할 때는 태그를 사용한다.강조 태그: , : 중요한 내용을 굵게 강조: 의미적으로 강조 (기울임 처리)강조된 굵은 글자입니다.중요한 강조를 의미할 수 있습니다.2. 리스트 구성 태그정보를 나열할땐 리스트를 사용한다.순서 없는 ..
[HTML] html의 기본 구조 HTML 기본 구조HTML은 웹 페이지의 뼈대를 만드는것과 같다.기본적인 HTML 문서는 항상 아래와 같은 구조를 가진다. DOCTYPE문서 형식 선언이라고 불리우는 DOCTYPE은 문서가 시작되기 전 해당 문서가 어떤 마크업 언어 형식으로 작성되었는지를 명시해준다.DOCTYPE 뒤의 html은 해당 문서가 HTML5로 작성되었다는 뜻이다.참고로 이전 HTML 버전들은 DOCTYPE 선언 방식이 아래와 같이 사용된다.버전DOCTYPE 선언 방식특징HTML4.01 (Strict)엄청 길고 복잡함XHTML1.0XML 규칙도 따름문서 형식 선언을 하지 않으면 브라우저가 호환 모드로 문서를 해석하기 때문에 디자인이 깨지거나 CSS 오작동과 같은 문제가 발생할 수 있다.HTML은 웹 페이지의 시작과 끝을 알리는..

728x90