성장을 위한 기록

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 자바스크립트를 배우기 전 자바스크립트의 역할 웹 요소를 제어 웹 어플리케이션 제작 가능 서버 개발 가능 자바스크립트 작성하기 자바스크립트는 html, css와 다르게 대소문자를 구분한다. 따라서 sum과 Sum은 다른 변수로 인식된다. 또한 문서에 이미지나 텍스트 등의 요소를 제어하는 경우가 많아 보통 태그 바로 직전에 소스를 작성한다. 자바스크립트 작성 방법은 css와 동일하게 2가지 방법이 있다. 직접 작성하기 문서 안에서 태그에 소스를 직접 작성하여 적용한다. 짧은 소스에 경우 바로 확인이 가능하다는 장점이 있지만, 단점이 많아 잘 사용하지 않는 방법..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 플렉스 박스 레이아웃 플렉스 박스를 알기 전 알아야 할 용어 플렉스 컨테이너 - 부모 박스로 플렉스 박스 레이아웃대상을 묶는 요소 플렉스 항목 - 자식 박스로 플렉스 레이아웃을 적용할 대상 주축 - 항목을 배치하는 기본 방향으로 왼쪽에서 오른쪽 수평 방향으로 배치 교차축 - 주축과 교차하는 방향이며 기본적으로 위에서 아래로 배치한다. 플렉스 박스에는 많은 속성이 있다. 플렉스 컨테이너를 지정하는 속성 배치할 요소가 있다면 그 요소를 감싸는 부모 요소를 만들어야 한다. 그리고 그 부모 요소를 플렉스 컨테이너로 만들어야 하는데 그때 사용하는 속성이 displa..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 뷰포트 스마트폰 화면에서 실제 내용이 표시되는 영역을 말한다. PC와 모바일 기기에 표시되는 픽셀의 차이가 있기 때문에, 뷰포트를 고려하지 않고 단순히 크기를 모바일 용으로 작게 만들어도 실제 화면에서는 전체 980px 너비로 표시하게 된다. 기본형 다음은 content 속성과 값이다. 뷰포트를 기준으로 하는 새로운 단위가 있다. vw - 1vw는 뷰포트 너비의 1% vh - 1vh는 뷰포트 높이의 1% vmin - 뷰포트 너비와 높이 중 작은 값의 1% vmax - 뷰포트 너비와 높이 중 큰 값의 1% vmin과 vmax 단위는 vw, vh와 다르게 화면..

제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. animation(애니메이션) 애니메이션은 특정 지점에서 스타일을 바꾸는 방법이며 @keyframes 속성으로 정의하고 animation속성과 그 하위 속성으로 실행 시간이나 반복 여부 등을 결정한다. @keyframes 기본형 @keyframes { { } } 이다. 여기서 선택자는 스타일 속성값이 바뀌는 지점을 가르키고 %단위를 사용하여 나타낸다. 시작과 끝을 나타낼 수 있는 0% 와 100%는 각각 from과 to를 대신 사용한다. animation-delay 트렌지션과 마찬가지로 초(s)나 밀리초(ms) 값을 이용해 시작 시간을 늦출 수 있다. ani..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 변형에 사용하는 속성과 함수 속성 transform 변형을 사용할 때에는 속성 transform을 사용하고 값으로는 밑에 표로 나열되어 있는 함수를 적절히 사용하면 된다. 기본 값 transform: 함수(값) 2차원 변형 3차원 변형 translate translate(tx, ty) 값에서 tx값만 입력하면, ty값은 0으로 간주한다. 또한 각 값이 양수라면 x 축은 오른쪽 y 축은 아래쪽으로 음수라면 반대로 이동한다. scale 함수와 헷갈릴 수 있기 때문에 두 가지 다 적어주는 것이 좋다. scale scale(tx,ty) 값에서 tx값 하나만 입력하..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 하위 선택자 vs 자식 선택자 하위 선택자는 모든 하위 요소를 선택할 수 있어 자식 뿐만 아니라 손자 요소까지 영향을 받는다. 반대로 자식 선택자에 경우 반듯이 자식 요소만 선택이 가능해 범위를 좁힐 수 있다. 인접 형제 선택자 vs 형제 선택자 인접 형제 선택자에 경우 형제관계에 요소 중 가장 가까운 즉 첫 번째 요소만 선택할 수 있다. 형제 선택자는 형제 관계라면 모든 요소를 선택 할 수 있다. 속성 선택자 예시를 들어 설명을 보충해보자면 ..생략... 라는 코드에 선택자를 대입을 해보자 a[href] {} a[href="example.hwp"] {} ..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. background-repeat 값은 repeat(기본 값) repeat-x, repeat-y, no-repeat이 있다, repeat > 가득 찰 때까지 가로와 세로로 반복 repeat-x > 화면 너비에 가득 찰 때까지 가로로 반복 repeat-y > 화면 높이에 가득 찰 때까지 세로로 반복 no-repeat > 한 번만 표시 background-position : left | center | right | | : top | center | bottom | ...... 형식으로 선택할 수 있다. 가장 많이 사용하는 방식은 키워드이며 정 중앙일 경우 ba..

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. 박스 모델은 블록 레벨 요소와 인라인 레벨 요소로 구분할 수 있다. 블록 레벨 요소 - 태그를 삽입했을 때 혼자 한 줄을 차지하는 것이다. ,,태그 등이 있다. 인라인 레벨 요소 - 한 줄을 차지 하지 않는다. 콘텐츠만큼 영역을 차지하고 나머지 공간에는 다른 요소가 온다. ,,태그 등이 있다. 박스 모델의 기본 구성은 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성된다. border-style 값 none(기본값) - 테두리가 없다. hidden - 테두리를 감춘다. (border-collapse: collapse 경우 다른 테두리도 표시되지 않는다...

*제 개인적인 정리이기 때문에 다소 설명이 모호할 수 있습니다. 또한 "html,css,자바스크립트 do it" 책에 내용이 다소 포함되어 있습니다. font-size에서 글자 크기를 조절하는 단위는 여러 가지가 있다. 우선 절대 크기, 상대 크기, 크기, 백분율로 나눌 수 있다. 절대크기 - 브라우저에서 지정한 글자 크기 상대 크기 - 부모 요소의 글자 크기를 기준으로 상대적인 크기 지정 크기 - 글자 크기를 직접 지정 백분율 - 부모 요소의 글자 크기를 기준으로 %로 표시 속성을 알아보면 키워드를 사용 - xx-small < x-small < small < medium < large < x-large < xx-large 순이다. 단위를 사용 em - 부모 요소에 지정한 글꼴의 대문자 M의 너비를 1e..