목록분류 전체보기 (135)

열정 실천

[HTML 004] 블록과 인라인

html의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정하는 display 속성을 가진다. display 속성의 값으로 inline과 block, 그리고 두 가지의 장점을 합친 inline-block이 있다. inline ✔ html 태그의 내용 만큼만 차지 ✔ 태그를 연달아 썼을 때 한 줄에 나타남 ✔ width, height로 크기 조절을 할 수 없음 ✔ 좌우 margin, padding만 적용 가능 (상하는 불가능) 📌인라인 태그 종류 , , , , block ✔ 해당 라인의 모든 너비를 차지 ✔ 태그 요소마다 줄을 바꿈 ✔ width, height, 상하좌우 margin, padding이 모두 가능 -> 레이아웃을 작업하는 요소로 적합 ✔ 내용과 별개로 자신의 영역을 가짐 📌블록 ..
개발 공부/HTML 2023. 3. 23. 14:22
[CSS 004] 색상 속성

CSS가 색상을 표현하는 3가지 방법 1. 색상 이름 ========색상 이름 찾기 사이트======== CSS/Properties/color/keywords - W3C Wiki Color keywords Basic Colors Named Numeric Color name Hex rgb Decimal black #000000 0,0,0 silver #C0C0C0 192,192,192 gray #808080 128,128,128 white #FFFFFF 255,255,255 maroon #800000 128,0,0 red #FF0000 255,0,0 pu www.w3.org ================================= 2. RGB (RGBA) 코드 3. 16진수 색상 코드
개발 공부/CSS 2023. 3. 18. 20:26
[CSS 003] 스타일의 중첩과 Cascading(캐스케이딩)의 의미

한 개의 p{ border: solid; bolder-color:red} p{ bolder-color:green} 이렇게 CSS 코드가 중복될 경우에는 항상 마지막에 입력된 명령이 실행된다. 하지만 이렇게 코드의 등장 순서를 이용하여 과거의 CSS 코드를 강제로 덮어씌우는 방법은 좋은 방법이 아니다. 캐스케이딩을 이해한다면 더 효율적으로 프로젝트를 관리할 수 있다. CSS는 "Cascading Style Sheet"의 줄임말이다. CSS에서 말하는 Cascading은 스타일이 쏟아져 내리는 것을 의미한다. ------------------------------------------------------작성중-------------------------------------------------------..
개발 공부/CSS 2023. 3. 18. 20:18
[CSS 001] CSS를 적용하는 3가지 방법

1. 태그 안에 style 속성 부여하기 아래와 같이 태그 안에 style 속성을 부여하여 CSS를 적용할 수 있습니다. 기본형 예시 ................................................................................................................................................................ 2. style 태그를 활용하기 기본형 예시 ...........................................................................................................................................
개발 공부/CSS 2023. 3. 18. 19:59
[CSS 000] CSS 시작! - 선택자의 종류와 사용법

우리가 작성한 HTML파일에서 특정 부분만 딱 골라 CSS를 적용하여 꾸며야하는데 그 부분을 어떻게 구분하여 적용할까요? CSS는 선택자를 이용하여 특정 부분을 골라냅니다. 기본 규격은 아래와 같습니다 . (선택자) { (스타일 속성1): (스타일 값); (스타일 속성2): (스타일 값); } 선택자에는 태그, 클래스, 아이디가 있습니다. 각각을 선택자로 이용할 때에는 각각의 명칭 앞에 붙는 기호가 다릅니다. 태그 : (태그 명) 클래스 : .(클래스명) 아이디 : #(아이디 명) 선택자01. 태그 (태그 명) { ... } html을 작성할 때 사용한 태그를 그대로 선택자로 활용합니다. 그러면 해당된 모든 태그를 대상으로 CSS가 작동하게됩니다. 예시 가장 넓은 범위에 동시다발적으로 디자인을 적용할 때..
개발 공부/CSS 2023. 3. 18. 19:58
[HTML 003] OG Tag - 한 눈에 보는 페이지 정보 (Github Pages - 내 웹 페이지 배포하는 법)

OG 태그 특정 링크를 공유했을 때 위와 같이 썸네일 이미지, 제목, 설명 등의 내용을 볼 수 있다. 이는 Open Graph Protocol 인 OG 태그를 활용했기 때문이다. 이 OG태그는 공유한 링크로부터 웹 페이지의 특정 정보를 가져올 수 있게 한다. OG 태그는 head에 이러한 형식으로 작성한다. 하지만 이 태그를 사용하기 위해서는 해당 페이지가 배포가 되어있어야 가능하다!! 👇👇👇👇👇👇 Github Pages로 내 페이지 배포하기 1. Github Pages 원격 저장소 만들기 *Repositoy 이름 주의* Repository name : [계정명].github.io 2. 새로운 폴더 생성 후 html 파일 만들기 html 파일 이름은 반드시 index.html 로 해야한다! 3. Git ..
개발 공부/HTML 2023. 3. 16. 17:12
이전 Prev 1 ··· 11 12 13 14 15 16 17 ··· 23 Next 다음