20대의 자산

CSS에서 padding속성은 정의된 테두리 내부의 요소 콘텐츠 주위에 공간을 생성하는데 사용합니다. CSS를 사용하면 패딩을 완전히 제어할 수 있으며 요소의 각 측면(상단, 오른쪽, 하단 및 왼쪽)에 대한 패딩을설정하는 속성이 있습니다. padding-top padding-right padding-bottom padding-left 모든 속성 패딩은 아래와 같은 값을 가질 수 있다. 1. 길이 - px, pt, cm 등의 패딩을 지정합니다. 2. % - 포함하는 요소 너비의 패딩을 %로 지정합니다. 3. 상속 - 패딩이 상위 요소에서 상속되어야 함을 지정합니다. div { padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-lef..

WEB-Front end/*CSS 2023. 4. 22. 17:11

CSS margin속성은 정의된 테두리 외부의 요소 주위에 공간을 만드는데 사용된다. 여백을 완전히 제어할 수 있으며, 각 면 (위, 오른쪽, 아래, 왼쪽)에 여백을 설정하는 속성이 있다. 각 면에대한 속성 - margin-top - margin-right - margin-bottom - margin-left 모든 여백 속성은 다음 값을 가질 수 있습니다. - 자동 : 브라우저가 여백을 계산합니다. - 길이 : px, pt, cm 등의 여백을 지정. - % : 포함하는 요소 너비의 여백을 %로 지정. - 상속 : 여백이 상위 요소에서 상속되어야 함을 지정. 코드를 단축하기 위해 하나의 속성에 여백 속성을 모두 지정할 수 있다. 속성 값이 4개 있는 경우 * 여백 : 50px 100px 80px 25px;..

WEB-Front end/*CSS 2023. 4. 21. 23:45

CSS font-size의 크기 단위 1. 절대적 크기 2. 상대적 크기 1. 절대적 크기 텍스트의 크기를 명시된 크기 그대로 설정하고자 할 때 사용합니다. 절대적 크기로 설정된 텍스트는 모든 브라우저에서 같은 크기로 표현됩니다. px : 스크린의 픽셀을 기준으로 하는 절대적인 크기를 나타냅니다. 고정된 크기 단위이며 크기를 조절할 수 없다는 단점이 있다. 만약 20px을 설정했다면 핸드폰이나 pc에서도 20px이다. 2. 상대적 크기 텍스트를 둘러싸고 있는HTML 요소들의 크기에 따라 테스트의 크기로 같이 변하는 방식입니다. % : 백분율 단위이며 기본 크기(16px)를 100%로 놓고 그에 대한 상대적인 크기를 설정합니다. em : 배수 단위이며 글꼴의 기본 크기(160px)를 1em으로 놓고 그에 ..

WEB-Front end/*CSS 2023. 4. 20. 23:09

CSS가 제공하는 다양한 텍스트 속성을 알아보자. 대표적인 text속성은 아래와 같다. 1. color 2. direction 3. letter-spacing 4. word-spacing 5. text-align 6. text-decoration 7. text-transform color 속성 color 속성은 텍스트의 색상을 설정합니다. 태그에 명시된 color속성값은 웹 페이지 내의 모든 텍스트 요소에 적용된다. (요소별로 명시된 color속성값이 있다면, 해당 속성값이 태그에 명시된 속성값보다 우선시됨.) color 속성을 이용한 텍스트의 색상 설정 각 요소별로 따로 명시된 color 속성값은 body 태그에 명시된 속성값보다 우선 적용됩니다. direction 속성 일반적으로 텍스트는 왼쪽에서 오..

WEB-Front end/*CSS 2023. 4. 20. 22:12

CSS애서 사용할 수 있는 background 속성은 아래와 같다. 1. background-color (배경색 속성) 2. background-image (배경색 이미지) 3. background-repeat (반복 유무) 4. background-position (상대 위치 설정) 5. background-attachment (해당 위치에 고정) 1. background-color 속성 1. background-color 속성은 HTML 요소의 배경색를 설정합니다. CSS를 이용한 배경색 설정입니다. 각 HTML 요소에 개별적으로 배경색을 설정할 수 있습니다. 2. background-image 속성 배경 이미지 CSS를 이용한 배경이미지 설정입니다. 여기에 background-repeat: repe..

WEB-Front end/*CSS 2023. 4. 20. 20:52

CSS에서 색을 표현하는 방법에는 세 가지 방법이 있습니다. 1. 색상 이름으로 표현 2. RGB 색상값으로 표현 3. 16진수 색상값으로 표현 색상 이름으로 표현 현재는 대부분의 브라우저가 140개의 색상 이름을 지원하고 있습니다. RGB 색상값으로 표현 모니터나 스크린은 빨간색, 녹색, 파란색을 혼합하여 색을 표현합니다. RGB 색상의 기본색은 각각 0부터 255까지의 범위를 가진다. 16진수 색상값으로 표현 16진수 색상값은 RGB색상값을 각각 16진수로 변환한것. 따라서 RGB색상의 기본색(redm greenm blue)은 각각 00부터 FF까지의 범위를 가집니다. See the Pen Untitled by 빠랍 (@wbdl27) on CodePen.

WEB-Front end/*CSS 2023. 4. 20. 20:33

이미지 태그 *파일 경로 작성 방법* 1. 절대 경로 고유한 경로를 사용. http:// https:// (file 경로는 사용하지 않음) D:\kaite\HTML\Day3\hamster2.png 예 ) 2. 상대 경로 - 복습 중요*** 이미지를 삽입할 HTML 문서를 기준으로 경로를 사용합니다.(보통 상대 경로를 많이 사용함) (1) 이미지가 HTML 문서와 같은 폴더에 있는 경우 -> 파일명 또는 ./파일명 예 ) (2) 이미지가 images 하위폴더에 있는 경우 -> images/파일명 또는 ./images/파일명 (3) 이미지가 상위폴더에 있는 경우 -> ../파일명 (4) 이미지가 상위폴더 images에 있는 경우 ->../images/파일명 알고 넘어가기 비트맵과 벡터이미지 비트맵 : 비트맵..

WEB-Front end/*HTML 2023. 4. 17. 23:24

HTML(HyperText Markup Language) 웹사이트의 구조를 담당하며, 문서에 제목, 표 , 이미지, 동영상등을 정의하고 의미를 부여하는 언어. 파일을 수정하고 싶다면, 텍스트 편집기를 이용하자 결과(웹페이지)를 확인하고 싶다면, 웹브라우저로 열기(Chrome, 엣지,...등등) 텍스트 편집기 : 기본 메모장, Brackets, VSCode,,,등등 * HTML은 문서를 작성할 수 있는 곳이면 어디든지 작성이 가능. * 확장명은 .html * HTML은 대소문자를 구별하지 않습니다. 단, 소문자로 작성하는 것을 권장. * HTML은 띄어쓰기, 줄바꿈을 구별하지 않아 따로 태그를 넣어줘야함. * 태그 * HTML은 태드 형태로 괄호()를 사용하여 표현합니다. : 시작 태그 : 종료 태그 : ..

WEB-Front end/*HTML 2023. 4. 16. 23:57