1. CSS에 대해 웹개발에서 스타일링을 위해 대표적으로 사용하는 것이 CSS CSS는 Cascading Style Sheets의 약자, 스타일링을 위한 일종의 언어 cascading은 계단식이라는 뜻으로, 여러가지 스타일이 정의되어 있는데, 한번에 여러 스타일이 적용될 경우에 스타일 충돌을 막기 위해 계단식으로 스타일이 적용되는 규칙이 있다. 하나의 엘리먼트가 여러개의 스타일 규칙을 만족하면, 해당 스타일을 마치 계단을 한칸씩 내려가는 것처럼 우선순위에 따라 하나씩 적용하게 된다. 결과적으로 하나의 스타일이 여러개의 엘리먼트에 적용될 수 있고, 하나의 엘리먼트에도 여러개의 스타일이 적용될 수 있다. 엘리먼트에 스타일이 적용되는 규칙을 selector라고 부른다. 스타일을 어떤 엘리먼트에 적용할지를 선택..
1. 정의 react 공식 웹사이트에서는.. A JavaScript library for building user interfaces "사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리" - 라이브러리 = "자주 사용되는 기능을 정리해 모아 놓은 것" 1-1) 사용자 인터페이스(user interface) UI로 줄여서 부른다 사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것 웹사이트에서 버튼, 텍스트 입력창 등이 모두 UI 버튼을 눌러 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여주어서 사용자들이 반응을 함 1-2) SPA(single page application) 하나의 페이지만 존재하는 웹사이트, 애플리케이션 수백 개의 웹페이지..
1. css 원칙 2 "모든 요소는 네모(박스모델)이고 좌측 상단부터 위에서 아래로, 왼쪽에서 오른쪽으로 배치" "display에 따라 크기와 배치가 달라진다" 박스로 쌓이는 태그들을 display 설정에 따라 배치해나간다 2. block display:block 줄 바꿈이 일어나는 요소 말 그대로 블록처럼 위에서 아래로 쌓인다 화면 크기 전체의 가로 폭을 차지 그러니까 다음 블록을 쌓으면 다음 줄에 쌓인다 물론 width로 크기를 지정할 수 있는데 그렇다고 해서 여러 block이 한줄에 쌓이는 것은 아니다 width만큼 내용물을 채우고 그만큼 우측에 margin을 자동으로 채우나봐 블록 요소 안에는, 인라인 요소가 들어갈 수 있다 대표적인 블록 요소는 div, ul,ol,li, p, hr, form 3..
1. css의 대원칙 'css의 모든 요소는 박스다' 모든 요소는 네모(박스모델)이고 위에서부터 아래로, 왼쪽에서 오른쪽으로 쌓인다 원으로 생긴것도 자세히보면 박스안에 들어가있고 2. normal flow 기본적으로 inline 요소는 왼쪽에서 오른쪽으로 나아가고 block요소는 위에서부터 아래로 쌓인다 3. box model 모든 html 요소는 box 형태로 되어있다 하나의 box는 네 부분으로 나뉜다. margin, border, padding, content padding과 margin을 구별을 잘 해야하는데 테두리 border를 중심으로 안쪽에 내용물과 테두리 사이 공백이 padding이고 테두리와 바깥 다른 요소 사이 공백이 margin이다 기본적인 요소를 먼저 생성하고 top에 24px; 만..
1. position 속성 static, relative, absolute, fixed, sticky 모든것이 box로 되어있는 html 태그들은 기본적으로 위에서부터 아래로 쌓이는데, 필요에 따라 다르게 배치하고 싶을 때가 있다 기본값은 왼쪽이지만 오른쪽처럼 만들고 싶다면..? 2. relative 자기 자신의 static 위치를 기준으로 이동함 원래 나 자신이 있어야할 위치에서, top, left, right, bottom의 몇 pixel만큼 위치를 옮기는 것 레이아웃에서 여전히 static에 공간을 차지하고 있으며, 사람 눈에만 이동한 것처럼 보인다 3. absolute 브라우저 화면 기준으로 위치를 이동시킴 화면에서 공중에 뜬 것처럼 일반적인 flow를 벗어남 일반적인 normal flow에서 제..
1. overflow 기능 overflow는 부모요소와 자식요소 사이 관계에서 부모요소가 자식요소를 어느정도 보이게 만들지 결정하는 기능 기본값은 overflow: visible;인데 위와 같이 자식요소(좌,우측상단 파란색박스)가 부모요소(상단 검정색 박스)를 넘어가더라도 내용을 전부 보여준다 overflow: hidden;을 주면 아래와 같이 자식요소에서 넘어가는 부분을 숨겨준다 overflow: auto;와 overflow: scroll;은 hidden에서 숨겨진 부분을 보고싶을때 스크롤 기능을 제공한다 overflow: auto;는 자식요소가 넘어가지 않는다면 visible처럼 전부 보여주는데, 자식요소가 넘어간다면 hidden처럼 숨기고 스크롤바를 제공한다 overflow: scroll;은 자식요..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
