컴과생의 끄적끄적

CSS 함수 CSS의 함수는 괄호 안에 인수를 전달하면, 인수에 따른 결과값을 속성에 적용하는 방식으로 동작한다. ex) 함수명(x) calc() 계산식의 결과를 속성값으로 지정할 수 있음 괄호 안에 표현식 하나를 받고, 표현식의 결과가 최종값이 됨 *표현식은 단순 계산식이면 무엇이든 가능하다. ex) width: calc(30px - 20px) *calc() 함수를 통해 textarea의 width를 가변으로 만들어 button이 고정 100px이더라도 브라우저 크기 변화에 따라 여백이 만들어지지 않도록 설정함. DOCTYPE html> calc 함수 .message{ display: flex; justify-content: space-around; align-items: center; height: ..

비율에 기반한 크기 조절 폰트 뿐 아니라, 레이아웃에도 비율에 기반한 개념을 적용할 수 있다. 부요 요소의 크기에 비례해 자식 요소의 크기가 변하는 방식은 가변 레이아웃을 만들 때 흔히 사용되는 방식이다. % (퍼센트) - %단위는 백분율 값을 나타냄. 보통 부모 요소와의 상대적 크기 지정할 때 사용 너비와 높이, 여백 뿐 아니라 글자 크기에도 사용 가능 주의! 너비와 여백은 부모 요소의 너비에 비례해 계산됨 font-size: 50%; height: 50%; width: 50%; margin: 10%; /*부모의 여백기준이 아닌, 부모의 width 기준*/ padding: 10%; /*부모의 여백기준이 아닌, 부모의 width 기준*/ DOCTYPE html> 가변 레이아웃 .container{ wid..

em과 rem은... 상위 요소 글자 크기에 따라 달라지는 가변성을 지니고 있는 것이지, 브라우저나 기기 화면에 따라 크기가 달라지는 단위는 아니다. 따라서 진정한 반응형 단위라고 할 수는 없다. 반응하는 단위들 아래 몇 가지 단위들은 뷰포트 크기를 기반으로 값을 계산하여 크기를 결정하는 가변 단위이다. vw /* 뷰포트 너비의 100분의 1*/ vh /* 뷰포트 높이의 100분의 1*/ vmin /* 뷰포트 너비와 높이 중 작은 쪽의 100분의 1*/ vmax /* 뷰포트 너비와 높이 중 큰 쪽의 100분의 1*/ DOCTYPE html> 다른 상대 단위들 p{ margin: 0; /*p태그는 기본적으로 margin의 속성을 가지고 있음*/ font-size: 50vw; } 반응형

절대단위 대신 사용해 볼 상대단위 절대 길이 단위 px : 어떤 상황에서도 동일한 값을 유지, 가변성 없음. em과 rem : 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위 em: 부모 요소의 글꼴 크기 더 알아보기! em으로 여백 크기(padding과 margin)를 정할 때는, 자기 자신의 글자 크기를 기준으로 함 rem: 루트 요소의 글꼴 크기 루트요소란? 요소. 기본값은 16px DOCTYPE html> em과 rem .outer{ font-size: 24px; } .inner{ font-size: 2em; /*48px*/ display: inline-block; width: 200px; height: 200px; background-color: tomato; } 고양이

수강 계기 우연히 광고를 통해, 스파르타 코딩클럽에서 진행하는 크리스마스 디데이 캘린더 만들기 강의를 접하게 되었다. "HTML/CSS/JS로 단 1시간 만에 만들 수 있다!"라는 문구를 보곤 짧은 강좌로 결과물을 만들어낼 수 있다는 생각에 바로 수강신청을 하였다. 이번 겨울 크리스마스 디데이 캘린더를 만들어 보고 싶기도 해 크리스마스가 지나기 전 빠르게 수강하였던 것 같다. 결과물 먼저, 결과물은 다음과 같다. 강의 총평 강의 총평을 하자면, 1시간만에 진행되는 강좌답게 직접 코딩을 통해 실력을 기를 수 있다기보다 전체적인 그림을 잡기에 좋을 거 같았다. 코드스피넷으로 코드를 Ctrl + C, Ctrl + V 하고, 코드에 대해 설명해주는 형식으로 진행되었다. 결론적으로는 제가 만든 결과물이라기 보다는..

컴포넌트란? 스타일을 만드는 HTML + CSS + JS의 결합 단위 [장점] - 재사용 가능 (Reusability) => 재사용가능한 빌딩 블록의 반복을 피하게 한다. - 우려사항들을 분리 (Separation of Concerns) => 코드베이스를 작고 관리 가능한 단위로 유지한다. 선언적 방식 리액트로 작업할 때는 항상 원하는 최종 상태(목표 상태)를 정의하는 것이 중요하다. 리액트가 하는 일은 실제 웹페이지에서 어떤 요소가 추가되거나, 삭제되고, 업데이트 되어야 하는지를 해결하는 것이다. 따라서 자바스크립트에서 하는 것처럼 직접 구체적인 DOM을 업데이트하는 지침들을 작성할 필요가 없다. Node.JS 설치 및 리액트 프로젝트 생성 리액트 설치 오류 시 [해결 방법] 1. 전역 설치된 리액트 ..

변수 let과 const var: 자바스크립트에서 변수 생성 (ES6에는 var도 물론 있지만, let과 const 사용을 권장) - let: 값을 수정할 수 있는 변수를 선언할 때 사용 (새로운 var) - const: 한번 지정하면 정대 변하지 않는 값인 상수를 선언할 때 사용 (새로운 값을 할당할 수 없는 키워드. 만약 실수로 값을 재할당하도록 코드를 작성했다면, 오류 발생🚨) const myName = 'Max'; console.log(myName); myName = 'Manu'; console.log(myName); "Max" "Manu"// var의 경우 "Max" "Manu"// let의 경우 (var과 결과 동일) "Max" "error"// const의 경우 (두 번째 console.lo..

리액트(react.js)란 무엇일까? 리액트(React) : 자바스크립트의 라이브러리로 사용자 인터페이스를 만드는데 사용 웹에서 모바일과 같은 빠른 반응성을 이끌어냄. 전통적인 웹사이트들은 새로운 html 페이지가 로딩되는 동안 기다려야 하기에 약간 무겁고 불편하게 느껴졌다면, 자바스크립트를 사용하면 DOM을 조작하여 브라우저 상에서 html 요소들을 변경할 수 있다. 따라서, 사용자에게 다른 것들을 보여주기 위해 새로운 html 페이지를 요청할 필요가 없다. 이것이 자바스크립트의 역할이고, 리액트 역시 자바스크립트 라이브러리이기 때문에 추가적 구성 요소로서 우리에게 도움이 된다. 자바스크립트에 추가로 리액트가 필요한 이유? 리액트와 연계해서 최신의 다채롭고 복잡한 사용자 인터페이스를 쉽게 구축할 수 있..

🔉💻 오랜만에 HTML, CSS 공부를 다시 하게 되었다. 이번 클론코딩을 통해서, 레이아웃을 구성에 있어 스스로 많이 해맨다는 것을 느꼈다. (이론으로는 많이 배워왔으나, 실제로 만들어보는 그 과정이 아직 익숙하지 않은 듯하다.) 내가 머리 속에 그리고 있는대로 화면이 나오지 않아 답답한 기분이 들었고, 알고 있는 것만을 활용하기 보다는 새로운 자료나 코드를 새롭게 많이 배우며 똑똑하게 코딩해야겠다는 생각이 들었다. 또 작성은 했지만, 제대로 정리가 되지 않은 코드들도 많이 보기 지저분하였고 가독성이 떨어졌다. 코드를 보기 좋게 정리하는 것에 대한 필요성도 많이 느낄 수 있었다. 매우 뚝딱거리는 내 미니 홈페이지...😂😱 MugApp Lorem ipsum dolor stisadfajklfdsfjdlaf..

웹프로그래밍 첫걸음 7장. CSS 스타일시트 이해하기 7.1 CSS 시작하기 7.1.1 스타일 시크와 CSS 기본 개념 CSS(Cascading Style Sheet)의 특징 -웹 컨소시엄에서 웹 문서용으로 개발한 스타일시트 언어 -CSS3는 화려하고 동적인 스타일 작성 가능 -CSS3는 모듈 기반으로 디바이스에 따라 필요한 부분만 업데이트 가능 7.1.2 CSS 스타일 속성 선언 CSS 기본 문법 -선택자와 속성 선언으로 설정 -다중 선택자는 ,(콤마) 로 구분 -{}(중괄호) 안에 나열, 속성과 속성값은 :(콜론)으로, 스타일 규칙은 ;(세미콜론)으로 구분 p,h3 {color:red; font-style:italic'} 7.1.3 HTML 문서에서 스타일시트 선언 내부 스타일시트 선언 외부 스타일시..