CSS

우리가 사용하는 색상 이름을 직접 입력하여 사용이 가능하다css에서는 140가지의 색상을 이름으로 지원하는데, 해당 방법으로는 색을 표현하는데 있어 한계점이 존재한다. 이를 보완하여 더 다채로운 색상을 표현하는 방법은 HEX, RGB 등을 사용하는 것이다.🔗 색상

픽셀은 고정된 값을 출력하며 절대 크기가 변하지 않는다. 해당 단위는 크기가 가변적인 웹사이트가 아닌 경우에는 유용하지만 반응형 사이트에 적용하기에는 굉장히 복잡하다는 단점이 있다.픽셀은 절대단위에 속한다.font-size : 80px 과 같이 사용함.

font-family는 글꼴을 설정하는 속성이다.기본값 : 웹브라우저의 기본 글꼴상속 : O애니메이션 : Xfont-family : font | initial | inheritfont : family-name 또는 generic-familyinitial : 기본값으로

전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS 속성을 적용합니다. 따라서 margin 이나 padding과 같은 값을 초기화하거나 기본값을 설정해둘 때 사용하고 \* 를 통해 표현합니다.문서내의 모든 요소를 읽어내려야 하기 때문에 로딩 속도가 느

CSS에는 가상 요소(:pseudo-element)와 가상 클래스(:pseudo-class)가 있다. 이것들을 사용하여 HTML 문서의 수정 없이 CSS만으로 디자인적 요소를 추가할 수 있어 HTML문서에 쓸데없는 태그를 사용하여 가독성을 낮추는 것을 방지한다.선택자

HTML element 는 하나 이상의 스타일에 영향을 받을 수 있기 때문에, 어떤 스타일을 적용 받을지에 대한 우선순위가 결정되어야 한다. 이를 캐스캐이딩 이라고 하며 CSS의 정식 명칭은 Cascading Style Sheets인 만큼 중요하다는 것을 알 수 있다.

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있다. 상속하는 속성은 자식 요소에 영향을 미치고, 상속하지 않는 속성은 자식 요소에 영향을 미치지 않는다.예를 들어 color는 상속하는 속성이다. 부모에서 지정한 색상이 자식 요소에도 적용된다.\--> Hello뿐

웹 페이지에 배치하는 모든 HTML 요소는 3개의 층을 가진 사각형 구조의 형태를 띠고 있다.!codepenpark0jae/embed/GRXmyYz?default-tab=html%2Cresult&theme-id=dark"width와 height 속성은 요소의 너비와 높

css의 display 속성이 inline으로 지정된 element는 줄바꿈 없이 한 줄에 다른 element들과 나란히 배치된다. 대표적인 inline element로는 span이나 a,em 태그 등을 들 수 있다.!codepenpark0jae/embed/GRXmQW

CSS에서 투명도를 설정하는 방법에는 세가지가 있다.!codepenpark0jae/embed/MWqoMRZ?default-tab=html%2Cresult&theme-id=dark"opacity 값은 0 ~ 1까지 존재하며 0에 가까울수록 투명 , 1에 가까울수록 불투명

static > position 속성의 default 값으로 나열한 순서대로 배치한다. !codepen[park0jae/embed/ZEMygWd?default-tab=css%2Cresult&theme-id=dark"] relative > 태그의 위치를 살짝 변경

트랜지션(Transition)은 CSS의 속성값이 변화할 때, 속성 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. !codepenpark0jae/embed/VwGWoqy?default-tab=css%2Cresult&theme-id=dark다음

transform 은 요소에 회전, 크기 조절, 기울이기, 이동 효과등 변형의 효과를 부여하는 프로퍼티이다. 아무것도 적용하지 않은 기본값은 none이다.요소의 위치는 그대로 둔 채 원래의 형태를 변형시킨다.Layout(레이아웃) 배치에 영향을 주진 않는다.scale은

웹 페이지 작업 시 배경을 처리하는 background 속성에 대해 정리해보자.배경색을 지정하는 속성으로, 투명도를 지정할 수 있는 rgba도 사용할 수 있다.배경을 이미지 파일로 지정하는 속성배경 이미지의 크기를 조절하는 속성으로 auto, cover, contain

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 한 번에 하나의 차원(행이나 열)을 다룬다.display : flex 를 통해 지정한다.flexbo

반응형 웹(Responsible Web)이란 디바이스별로 각각 레이아웃이 달라지는 웹이다.(= 쉽게 설명하자면 화면 크기 마다 레이아웃이 달라진다.)미디어 쿼리란 화면 크기마다 각각 다르게 CSS를 적용하는 것으로 화면 사이즈를 인식하여 서로 다른 CSS를 적용시켜준다

부트스트랩이란 프론트엔드 개발을 빠르고 쉽게 할 수 있는 프레임워크이다. HTML,CSS 기반의 템플릿 양식, 버튼, 네비게이션 및 기타 페이지를 구성하는 요소를 포함한다. container : 너비 고정 (양 옆 여백이 존재함), 화면 크기에 따라 max-width가

arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체이다. js는 유연한 언어로 함수 호출 시 인자 형식을 맞추지 않아도 에러가 발생하지 않는다. 📌 참고 : ES6 호환 코드를 작성 중이라면 되도록 나머지 매개변수 구문을 사용해야 한다.ar

다른 함수에 매개변수로 넘겨준 함수를 말한다. 매개변수로 넘겨 받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.총 3가지 함수를 선언linkYoutube, goToSleep 함수는 콜백함수check 함수가 먼저