profile
무엇이든 할 수 있고, 무엇이든 될 수 있는
post-thumbnail

미니 프로젝트 #1. Background Changer

이 프로젝트에서 중요한 것은 Hex Code를 랜덤으로 생성하는 함수이다.이를 위해서 Hex Code에 대해서 알아보자.Hex Code는 총 6자리로, 앞에서부터 두자리씩 끊어서 R, G, B를 나타낸다.R, G, B는 각각 0부터 255까지의 숫자를 16진수로 나타낸

2021년 6월 28일
·
0개의 댓글
·
post-thumbnail

Google Clone 해보자

자세히 들여다보면 이런 느낌.기가 막힌 기술을 쓰거나 배운 내용을 모두 다 갈아 넣었다고 생각하진 않는다. 하지만 HTML, CSS 초짜에게 이정도는 꽤나 발전된 모습인 것 같다!헷갈리거나 어려운 부분, 검색을 통해서 새로 얻은 정보들은 코드 안에 주석으로 처리해두었다

2021년 6월 7일
·
0개의 댓글
·

생활코딩 WEB2. CSS

미디어 쿼리는 반응형 웹을 제작할 때 필요하다. 요즘은 스마트폰, 티비, 컴퓨터 등 정보를 제공하는 매체의 화면 크기가 다양하기에 이에 맞춰서 출력을 다르게 하기 때문이다.아래는 적용 방식이다.미디어 쿼리 문장 안에 셀렉터를 활용해서 style을 적용할 수 있다.CSS

2021년 6월 2일
·
0개의 댓글
·

Inheritance & Cascading (상속, 우선순위)

상속이란 상위 요소에 적용된 속성을 하위 요소가 물려 받는 것을 의미속성별 상속 여부 확인 링크하나의 태그에 여러가지 방법으로 동일한 속성의 스타일을 적용하는 경우 우선순위에 따라서 적용될 스타일이 결정됨⭕ 우선순위를 결정하는 요소중요도 : CSS가 어디에 선언되었는지

2021년 5월 31일
·
0개의 댓글
·

Float (요소 정렬)

float 속성은 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것해당 속성을 사용할 때는 요소의 위치를 고정시키는 position의 absolute를 사용하면 안됨float: none; : 요소를 떠있게 하지 않음 (기본값)float: ri

2021년 5월 31일
·
0개의 댓글
·

position (요소의 위치 정의)⭐

position: static; : 요소를 문서 흐름에 맞추어 배치 (기본값)position: relative; : 이전 요소 (보통 부모 요소)에 맞추어 자연스럽게 연결하여 위치를 지정position: absolute; : 원하는 위치를 지정해 배치position:

2021년 5월 31일
·
0개의 댓글
·
post-thumbnail

Font & Text

font-size: 40px;font-size: 2.0em;font-size: 150%;font-size: large;대부분 프론트엔드 개발 시에는 font-size에 대해 px 단위를 사용하고 있지만, 요즘 트렌드인 반응형이나 모바일로 인하여 em, % 단위를 사용하

2021년 5월 31일
·
0개의 댓글
·

Background

상속되지 않음이미지가 제대로 표시되지 않을 경우를 대비하여 background-color를 지정하는 것도 좋음복수개의 이미지를 표시할 경우, 콤마(,)로 구분하고 먼저 설정된 이미지가 전면에 출력주로 background-image 속성과 함께 사용하며, 이미지를 어떻게

2021년 5월 31일
·
0개의 댓글
·

Display ⭐

display 속성을 상속되지 않음block : block 특성을 가지는 요소로 지정inline : inline 특성을 가지는 요소로 지정inline-block : inline-block 특성을 가지는 요소로 지정none : 해당 요소를 화면에 표시하지 않음. (공간조

2021년 5월 31일
·
0개의 댓글
·
post-thumbnail

박스 모델

width와 height 속성을 비롯한 모든 박스모델 관련 속성은 (margin, padding, border, box-sizing 등..) 상속되지 않는다.요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역. width와 height가 차지하는 공간.padding

2021년 5월 31일
·
0개의 댓글
·
post-thumbnail

CSS 속성 값의 단위

CSS를 개발할 때에 이미 지정된 단어들을 의미한다.예를 들어 display 속성의 값으로 사용할 수 있는 키워드는 block, inline, inline-block, none이 있다.px는 절대값 → 대부분의 브라우저는 1px을 1/96인치의 절대단위로 인식em은 배

2021년 5월 31일
·
0개의 댓글
·

셀렉터 (Selector)

① 전체 셀렉터 (Universal Selector) ② 태그 셀렉터 (Type Selector) ③ ID 셀렉터 (ID Selector) ID

2021년 5월 27일
·
0개의 댓글
·
post-thumbnail

CSS 기본 문법

유튜버 '생활코딩'의 CSS 수업 커버 페이지를 보면 'CSS는 HTML을 아름답게 꾸며주는 디자이너의 언어'라고 소개되어 있다. 그럼 CSS는 어떤 역할을 하고, 어떻게 사용되는 것일까?CSS는 'Cascading Style Sheets'의 약자로 HTML과 같은 마

2021년 5월 27일
·
0개의 댓글
·