분류 전체보기

CSS : reset CSS (브라우저 기본 스타일 제거)

reset CSS (브라우저 기본 스타일 제거) 기본적으로 적용되는 브라우저 기본 스타일을 제거하고 싶을때 사용 Reset CSS 파일을 만들어줘야 한다. 아래 사이트에서 코드 복사하거나 내가 올려둔 코드를 복사하여 css 파일에 import 하면 적용된다. @import "reset.css"; CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was ..

CSS Hack : 정확히 중앙에 위치 시키기 (space-between 대신)

CSS Hack ABC가 있을때 A를 화면 좌측끝 B를 화면 중앙 C를 화면 우측끝에 위치시키고 싶을때 flexbox의 justify-content: space-between 를 보통 사용한다. 그러나 B가 화면의 정중앙에 들어가지 않을 경우가 있음. 이럴 때 CSS Hack 사용한다. 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동함. 상위 박스 .status-bar justify-content: center; 내부 박스들 .status-bar__column width: 33%; 중앙에 위치할 박스 .status-bar__column:nth-child(2) display: flex; justify-content: center; 오른쪽에 정렬할 박스 .status-bar__column:last-chil..

VSC(Visual Studio Code) HTML 단축키 모음

※ 반드시 HTML로 되어있어야 작동함. (가끔 Django HTML로 되어있을때 있음) ! 입력 후 Enter link:css 입력 후 Enter nav>ul>li*4 입력 후 Enter nav>ul>li*4>a 입력 후 Enter 요소안에서 .클래스이름*2 입력 후 Enter .user-component__column*2

HTML/CSS 유용한 사이트 / 크롬 확장도구 모음

사이트 이름 용도 사이트 주소 mdn 웹 개발 메뉴얼 https://developer.mozilla.org/ko/ validator.w3.org HTML 문법 검증기 https://validator.w3.org/#validate_by_input css-tricks CSS 가이드 https://css-tricks.com/guides/ material.io CSS 색상 고르기 https://material.io/resources/color/#!/?view.left=0&view.right=0 herocoin CSS SVG Icon 이미지 (Free) https://heroicons.com/ fontawesome CSS Icon 이미지 (Free) https://fontawesome.com/v5.15/icons..

BEM (Blocks, Elements and Modifier)

block component .btn {} block 안에 속한 자식 block .btn__price {} block 자체의 스타일을 변경시키는 Modifier .btn--orange {} .btn--big {} BEM을 사용하면 HTML 요소에 어떤 스타일들이 적용되었는지 쉽게 알 수 있다. 클래스가 서로 어떤 관계를 가지는지 쉽게 알 수 있다.

CSS - inline, block, inline-block

inline, block block : 한 줄을 다 차지하는 box margin : box의 border(경계)의 바깥에 있는 공간 padding: box의 border(경계)의 안쪽에 있는 공간 inline : 한 줄에 여러 요소가 올 수 있음. 높이/너비 존재하지 않음. margin은 좌/우만 가질 수 있음 padding은 상하좌우 다 가질 수 있음. inline-block : flex와 유사하게 block 요소들이 inline 성질을 가짐. 그러나 정해진 형식이 없으며 반응형 디자인을 지원하지않는다.

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)%배로 설정 텍..

코딩 테스트 풀이 - 2022 카카오 블라인드 1차 (1~4번 문제)

2021/09/11(일) 14:00~19:00 진행되었던 카카오 블라인드 1차 코딩테스트 문제 풀이 게시물입니다. 코드나 문제를 상세히 올려도 되는지 모르겠어서 간략히만 해설 합니다. 제가 아직 실력이 부족하여 4번까지만 TC ALL AC를 맞아서 우선은 4번까지 해설합니다. 혹시나 문제가 되면 글 바로 내리겠습니다. 2022 KAKAO BLIND RECRUITMENT 진행 정보 2022 KAKAO BLIND RECRUITMENT 전체 전형 절차 및 일정 지원 접수 : 8월 19일(목) ~ 9월 6일(월) 17:00 1차 코딩 테스트 : 9월 11일(토) 2차 코딩 테스트 : 9월 25일(토) 2차 코딩테스트는 1차 코딩테스트 programmers.co.kr 1번 문제 핵심 키워드 : 구현, 딕셔너리 문..

HTMl/CSS/JS 커리큘럼

HTML: 웹 구조화 HTML 기본 요소, 태그, 속성 및 값 Doctype 및 메타데이터 Root, head, body, & title 중첩 요소 특수 문자 HTML 주석 문서 구조 div 및 span Headers, nav, article, section, aside, & footer 텍스트 요소 및 서식 Headings, paragraphs, em, & strong 멀티미디어 및 임베딩 이미지 오디오 및 비디오 인라인 프레임 반응형 이미지 목록 및 테이블 LIinks 상대 및 절대 경로 이메일 링크 새 창에서 열기 Anchor tags Forms Input types Form, fieldset, legend & label Placeholder Accessibility Semantic markup A..

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..