프론트엔드 개발/HTML CSS

CSS - 텍스트 정렬, 간격 조절

Text-align (텍스트 정렬) text-align: start | end | left | right | cennter | justify | match-parent start : 시작 위치에 정렬 end : 끝 위치에 정렬 left (기본값) : 왼쪽 정렬 right : 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 match-parent : 부모 요소를 따라 정렬 line-height (줄 간격 조절) line-height: px | float | % px : 픽셀크기로 설정 float : 글자 크기가 px인 문단의 줄 간격을 float(0.5, 1.0, 2.0, 3.5..)배로 설정 백분율(%) : 글자 크기(px) 의 백분율(50, 100, 200, 350)%배로 설정 텍..

CSS - Grid (그리드)

그리드 2차원(행/열) 레이아웃 도구이자 CSS 모듈이다. 지원 브라우저 별 버전 can i use 사이트에서 확인 가능하다. CSS Grid Layout (level 1) | Can I use... Support tables for HTML5, CSS3, etc Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors. Includes support for all grid-* properties and the fr unit. S..

CSS - Flexbox, Grid 연습 사이트

codepip codepip 라는 사이트에서 게임으로 코딩공부를 할 수 있다. 무료 게임은 아래의 2개가 있다. Codepip Learn to code by playing games codepip.com flexbox 연습 사이트 Flexbox Froggy Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com Grid 연습 사이트 Grid Garden Grid Garden - A game for learning CSS grid How well can you tend to your carrot garden using CSS grid? In this game, you must water your carrot crops and poison the ..

CSS - Flexbox (플렉스 박스)

기본 용어 Axis main axis : 이 축을 기본으로 배치됨 - 범위 : main size (main-start ~ main-end) cross axis : main axis의 수직인 축 - 범위 : cross size (cross-start ~ cross-end) 플렉스 컨테이너 속성 (Properties) display (플렉스 컨테이너 정의) .container { display: flex | inline-flex }​ flex (기본값) : flex 레이아웃 적용 inline-flex : flex레이아웃 적용, container 영역이 item에 딱 맞춰짐 flex-direction (배치 방향) .container { flex-direction: row | row-reverse | colu..

CSS - 텍스트 스타일

color 속성 : 글자색 지정 color: 색상 색상은 6자리의 16진수, rgb, rgba, hsl, hsla, 색상이름(black,green,orange...) 기입 가능 VS code에서 아주 친절하게 색깔을 보여준다. 자동완성에서 6자리의 16진수까지 보여준다. 색상 표현법 6자리의 16진수 표기법 : #RRGGBB ※ 만약 RR, GG, BB가 각각 같은 숫자면 #RGB 로 축약가능 hsl, hsla (hue(색상), saturation(채도), lightness(명도)) 표기법 : hsl(0, 100% 50%) - 색상 : 무지개색을 시계방향으로 동그란원을 만들었을때의 각도 (red : 0도, cyan: 180도) - 채도(%) : 회색이 0%, 원래색은 100% - 명도(%) : 어두움 0..

CSS 폰트 적용 방법

font-family 속성 : 글꼴지정 font-family: 글꼴이름; font-family: 글꼴이름, 글꼴이름; font-family: "맑은 고딕", 돋음, 굴림; ※ 글꼴이 없을 경우 대비하여 여러 개 등록하는 것임. CSS3가 웹 폰트를 표준으로 채택하면서 사용자에게 없는 글꼴도 웹 문서와 함께 다운로드하여 보여줄 수 있게 되었다. 자신의 글꼴을 적용하기 위해서는 ttf,EOT,WOFF,WOFF2포맷을 직접 업로드해야한다. ※ TTF은 용량커서 Woff를 먼저지정해야 함 @font-face { font-family: 글꼴이름; src: 글꼴파일, 글꼴파일; } @font-face { font-family: 'HelloFont'; src: local('HelloFont'), url('font/h..

CSS - Cacading Style Sheet, Selector(선택자)

CSS란 CSS는 Cacading Style Sheet 이다. Cascading은 스타일 시트가 적용되는 우선순위가 위에서 아래로 떨어지는 폭포형태로 적용된다는 의미이다. 문서에 여러 개의 스타일을 적용할 때 충돌하지 않도록 하기위한 2가지 방법이 있다. 스타일 우선순위 : 사용자/제작자/브라우저 스타일 순서로 우선순위를 가지고 적용됨 스타일 상속 : 태그의 포함 관계에 따라 부모요소를 자식요소로 전달함 스타일 우선순위 Style Sheet는 아래의 3가지 종류가 존재한다. 사용자 스타일 제작자 스타일 브라우저 기본 스타일 웹 페이지에 아무런 스타일 적용하지 않았을 때 3. 브라우저 기본 스타일이 기본으로 적용해 둔 스타일이 적용되고 제작자가 따로 스타일을 적용했다면 2. 제작자 스타일이 적용되어 보여진..

CSS - html 파일에 css 적용시키는 방법

html 파일에 css 적용시키는 방법 인라인 방식 : HTML 파일의 각 태그안의 내부 스타일 시트 : HTML 파일 안에 태그로 작성 /* test.html.css */ /* css/style.css */ #First { color: red; background-color: yellow; } 외부 스타일 시트 : 태그 안의 내용을 CSS 파일로 분리하고 태그로 연결 절대주소 또는 상대주소 넣어주면 됨. (가장 좋은 방법) /* test.html.css */ /* css/style.css */ #First { color: red; background-color: yellow; } CSS Import : 태그 안의 내용을 CSS 파일로 분리하고 파일을 import 절대주소 또는 상대주소 넣어주면 됨. /..

HTML - input 태그 (사용자 입력, 텍스트 필드, 버튼)

태그 (사용자 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다. type 속성이 굉장히 많다. 종류 설명 text 한 줄짜리 입력 텍스트 박스를 넣는다. password 패스워드 입력 필드를 넣는다. serach 검색 입력 필드를 넣는다. 이 필드에 입력시 오른쪽에 x버튼 추가되어 손쉽게 입력내용 지울 수 있게 된다. url URL 주소 입력 필드를 넣는다. email 이메일 주소 입력 필드를 넣는다. tel 전화번호 입력 필드를 넣는다. checkbox 선택지가 2개 이상 있는 체크 박스를 넣는다. radio 선택지가 1개만 있는 라디오 버튼을 넣는다. number 숫자 조절가능한 스핀 박스를 넣는다. range 숫자 조절가능한 슬라이드 막대를 넣는다. date 사용자 지역 기준으로 날짜..

HTML - form 태그

태그 폼 이란 사용자 아이디/패스워드 같은 정보를 입력받을 때 사용된다. 태그 안에 , 등의 여러 입력칸을 작성하여 입력 폼 만들기 여러 폼 요소 속성 method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨 줄 지 지정 - get : 입력길이 제한있음, 주소 표시줄에 내용드러남 - post : 입력길이 제한없음, 주소 표시줄에 내용안드러남 name : JS로 폼 제어 시 사용할 이름 actiotn : form 태그 안의 내용 처리할 서버 프로그램 지정 target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열도록 함 autocoplete : 자동 완성 기능 (default=on) / 중요한 정보 입력은 off해줘야 함 예시 ... , 태그 폼 요소를 ..