목록개발 공부 (85)

열정 실천

[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
[HTML 002] 여러가지 태그의 종류와 사용법

여러가지 태그의 종류 줄바꿈 문단구분 *parageaph 제목표현 *heading 수평 가로선 하이퍼링크 *hypertext reference 버튼 사진 여러 태그를 담는 컨테이너 역할 text를 분할하는 역할 , 순서 번호가 있는 리스트 , 순서 번호가 없는 리스트 입력칸 여러가지 태그의 사용법 줄바꿈 여는 태그와 닫는 태그 없이 단독으로 사용한다. [사용 예시] [결과] 문단구분 하나의 문단을 쓸 때 사용한다. (줄바꿈 포함!) [사용 예시] [결과] 제목표현 제목을 표현한다. h1부터 h6까지 크기가 다르다. [사용 예시] [결과] 하이퍼링크 하이퍼링크를 걸어주는 태그 1. 기본형 : => 원래 있던 창에서 이동 2. target 옵션 : => 새로운 창에서 링크 접속 3. 가짜 하이퍼링크 : =>..
개발 공부/HTML 2023. 3. 16. 17:10
[HTML - 001] <head>와 <body>란? (주석다는 법, 주석 단축키, 코드 정렬)

html에서 주석달기 * 해당 라인 전체 주석처리하는 단축키 : ctrl [cmd] + / html 문서 기본 형식 웹 프론트엔드 개발 시작 : '이 문서의 종류는 HTML입니다' 라는 정보 (태그로 해당 html 문서를 감싸준다) : html 문서에 대한 설정 정보가 담김 : 웹 페이지 화면에 표시될 자료들이 담김 태그 1. 문서 일부에 정보를 부여한다. 2. 여는태그 와 닫는태그 를 활용하여 정보를 표현할 범위를 지정한다. 3. 범위가 필요없는 태그는 로 표현한다. 다양한 태그 종류 줄바꿈 문단 구분 *paragraph 제목 표현 *heading - ~ 하이퍼링크 -> *href : hypertext reference 버튼 사진 -> 여러 태그를 담는 컨테이너 역할 text를 분할하는 역할 , 리스트..
개발 공부/HTML 2023. 3. 13. 18:40
이전 Prev 1 ··· 5 6 7 8 9 10 11 ··· 15 Next 다음