background background는 콘텐츠의 배경을 정의한다. 색상, 이미지, 반복 등 하위 속성을 정의할 수 있으며 단축 속성을 사용할 수 있다. background의 하위 속성 background-color : 배경 색을 정의한다. background-image : 배경 이미지를 정의한다. background-repeat : 배경 이미지의 반복 방법을 정의한다 background-position : 배경 이미지의 초기 위치를 정의 background-size : 배경 이미지의 크기를 정의 1. background-color background-color 속성의 속성값 지정 방법은 color 속성의 속성값 지정방법과 똑같다. 색상 네임으로 색상을 정의할 수도 있고 RGB 색상 코드, 16진수 헥사..

box-sizing box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 정의한다. box-sizing 속성값 속성값으로는 content-box와 border-box 두 가지가 있다. 1. content-box 기본값(디폴트)이며 콘텐츠 영역만 너비와 높이에 포함한다. 요소의 실제 너비(actual width of element)= 콘텐츠의 width + padding + border 요소의 실제 높이(actual height of element)= 콘텐츠의 height + padding + border (1) 아래 div1과 div2는 컨텐츠 크기가 똑같다. 다만 패딩의 크기가 다를 뿐이다. (2) div1의 경우 컨텐츠의 크기는 300*100픽셀이고 실제 크기는 320*120픽셀이다. 실제..

1. margin, padding 하위 속성 margin과 padding에 top, right, bottom, left 등을 붙여 하위 속성을 만들 수 있다. 이것은 마진과 패딩에 동일한 방법으로 적용된다. 1) margin의 하위 속성 margin-top margin-right margin-bottom margin-left 아래 (그림 1)처럼 위, 우측, 아래, 좌측에 속성값을 주고 구글 크롬 개발자 도구로 출력하면 그 아래 (그림 2)와 같다. 아래 (그림 2)를 보면 패딩이 상, 우, 하, 좌측의 패딩이 20픽셀, 30픽셀, 40픽셀, 50픽셀로 지정되었다. 2) padding의 하위 속성 padding-top padding-right padding-bottom padding-left paddin..

css 박스 모델(Box-Model) 1 - margin, padding, border, content 박스(Box)란: 요소가 차지하고 있는 사각형의 영역 브라우저가 요소를 렌더링하는 시점에 각각의 요소들은 각각 사각형 형태의 영역을 차지하고 있다. 박스는 4개의 영역으로 구성되는데, margin, padding, border, content이다. css는 이 박스들의 크기, 위치, 속성들에 대해 스타일을 정의할 수 있다. 위 그림에서 바깥쪽 여백이 margin이고, 안쪽 여백이 padding이다. 테두리는 border 속성을 가짐으로써 두께, 모양, 색깔 등을 정의할 수 있다. 콘텐츠나 언제나 테두리(border)로 감싸져 있다. 콘텐츠 영역(span은 제외)은 width, height(너비, 높이)..

css 포지션 - static과 fixed와 sticky 차이점 지난 글 position 2편 2021.12.05 - CSS position, relative와 absolute 차이 position: static; ‘static’은 ‘고정적인’이라는 뜻이지만, css - position에서는 ‘원래 위치’란 뜻이다. 원래 위치에서 이탈하지 않고, 문서의 흐름을 그대로 따른다는 의미이다. static은 기본값(디폴트*, default)이다. static: 고정적인 fixed: 고정된 sticky: 달라붙는 static은 default값이며, * 디폴트(default, 기본값)이란 사용자의 개입 없이 자동으로 할당되는 설정 값이다. position의 속성값 static은 항상 페이지의 정상적인 흐름으로 배치..

CSS의 position 속성 중 relative와 absolute는 웹 디자인에서 중요한 역할을 하며, 그 차이를 정확히 아는 것이 중요합니다.CSS Position 속성이란?CSS에서 position 속성은 요소의 위치를 정의하는 데 사용됩니다. 웹 페이지의 레이아웃을 구성할 때 요소가 어디에 배치되는지 제어하는 중요한 역할을 합니다.relative와 absolute는 가장 많이 사용되는 두 가지 위치 속성입니다. 이 둘은 겉보기에 비슷해 보일 수 있지만, 동작 방식은 완전히 다릅니다.Position: relative와 absolute의 기본 개념1. Position: relativerelative는 요소를 자신의 원래 위치를 기준으로 이동시킵니다.특징:요소의 기본 위치를 유지하면서, 추가적으로 to..

HTML 이미지 태그 사용 방법 1. HTML 태그와 필수 속성, src, alt 이미지 태그는 HTML 문서의 외관을 꾸미는 용도로 사용하는 태그이다. 태그는 웹 페이지에 이미지를 삽입하기 위해 사용된다. 그러나 이미는 웹 페이지에 삽입되지 않는다. 이미지는 웹 페이지에 링크될 뿐이다. 링크는 반드시 경로를 수반한다. 그리고 img태그에는 경로(src), 즉 속성 src는 필수 속성이다. 통사론 위 태그에서 속성 src는 소스(source)의 약자이며 이미지의 위치(경로)를 지정한다. 다시 말하면 이미지의 위치(경로)를 링크하는 것이다. 2. img 태그는 빈 태그이다. 태그는 속성만 포함한다. 속성만 포함한다는 말은 닫는 ..

1. 시작 페이지 아래 화면은 시작 시 열린다. 안 열리면 아래 그림의 '시작시 시작페이지 표시'에 체크하면 시작시 아래 화면이 뜬다. 이 화면을 이용하여 새 파일, 최근 항목 등 빠른 실행이 가능하다. 2. 활동 표시줄(Activity Bar) 1. 탐색기(익스플로러): 단축키는 ctrl+shift+E 2. 검색: 단축키는 ctrl+shift+F 3. 소스 제어: 단축키는 ctrl+shift+G : 추후 버전 컨트롤 4. 실행 및 디버그: 단축키는 ctrl+shift+D : 문제 찾기, 코드 디버깅에 사용 5. 확장프로그램(Exetention): 단축키는 ctrl+shift+X : 추가 기능 설치 3. 설정 명령 팔레트: ctrl+ shift+P (맥은 cmd+shift+P): 비주얼 스튜디오 코드에서..

1. 자바스크립트의 역할 자바스크립트는 브라우저 화면에 랜더링 된 웹 콘텐츠를 조작하는 역할을 한다. 렌더링 된 페이지에 어떤 동작을 추가한다. html이 웹 페이지에 표시될 웹 콘텐츠들을 정의하는 역할을 하고, css가 콘텐츠들의 크기나 색상, 레이아웃 등을 정의한다면, 자바스크립트는 웹사이트의 동작과 상호작용을 정의한다. 동작에는 움직이는 시계나 이미지 슬라이더 등이 있고, 사용자가 버튼을 누르면 반응을 한다거나, 마우스를 올리면 메뉴가 펼쳐진다거나 하는 상호작용이 있다. 자바스크립트는 프로그래밍 언어이며, 여러 기능이 있지만 주로 웹 개발을 위해서 사용되는 언어이다. 1. HTML: 웹 페이지의 내용을 구조화 2. CSS: 웹 페이지의 레이아웃을 스타일화 3. JavaScript: 웹 페이지의 동작..

자바스크립트에서 스크립트 태그 추가 4가지 방법 가장 효율적인 방법은 무엇인가? 스크립트 태그를 head 안에 사용하는 것은 좋은 방법이 아니다. 그래서 쓰는 방법이 body 닫는 태그 위에 사용하는데 역시 단점이 있다. async 속성과 defer 속성을 사용하는 방법도 있다. 결론은 어떤 방법이 가장 좋을까 목차 스크립트를 head에 포함하는 방법 스크립트를 body에 포함하는 방법 async 속성 defer 속성 결론 1. 스크립트를 head에 포함하는 방법 사용자가 html 파일을 다운로드할 때 브라우저는 한 줄 한 줄 분석(parse)한다 그렇게 분석한 것을 css와 병합해서 돔 요소로 변환한다. html을 분석하는 과정에서 스크립트 태그를 만나게 되면 html 분석하는 것을 멈추고 js파일(s..