반응형 앱 만들기/CSS35 CSS 스타일 상속 CSS 스타일 상속 CSS 스타일 시트는 HTML태그 의 부모 자식 즉, 상속관계에 대해서 영향을 받습니다. 부모태그의 스타일 시트 속성값이 그대로 자식에게도 전해지는 것을 "스타일 상속" 이라고 말합니다. 예제를 보면서 알아보겠습니다. [html 코드] div 태그로 부모와 자식관계도를 만들었습니다. parent 는 child1, child2 두개의 자식을 가집니다. Parent Child1 Child2 Child3 [CSS 파일] CSS 파일에서는 부모 parent 의 너비 속성값을 설정 하였습니다. #parent{ font-size: 100px; } 웹브라우저에 실행한 결과는 부모와 자식관계 모두 글자의 크기(폰트 사이즈) 가 100px로 커졌습니다. 부모 자식 관계가 아닌 child3 은 상속관계.. 앱 만들기/CSS 2023. 6. 19. CSS position absolute 속성 이란? position absolute 속성. 지난 시간 우리는 position 의 relative 속성에 대해서 확인 해보았습니다. 마지막에 absolute 와 사용시 강력한 기능을 제공한다고 이야기 했는데요. 그 내용을 살펴보겠습니다. 먼저 소스 상에 하기처럼 index.html 과 main.css 파일을 작성 합니다. 첫번째 시간의 static 예제와 동일 합니다. [main.html] div 태그 안에 3개의 문단을 만듭니다. What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Why do we use it? Many desktop publishing packages and web pa.. 앱 만들기/CSS 2023. 6. 17. CSS position relative 속성 이란? position relative 속성 지난 시간 우리는 CSS 에서 position 이란 무엇인지 그리고 position 의 기본 값인 static 에 대해서 알아보았습니다. 이번 시간에는 relative 속성에 대해서 확인 해보겠습니다. 먼저 static 과 relative 결과값을 확인 한 후 어떤 차이점이 있는지 알아볼까요? static 은 요소의 속성(블럭,인라인)에 따라서 배치가 되었습니다. 기본 값으로 position 속성을 적지 않았을때와 동일했었죠. 그에 반해 relative 는 위치 값을 조정할 수 있습니다. 위치 값의 기준이 되는것은 바로 원래 그 요소의 기본 자리 입니다. 무슨 말인고 할때는 코딩을 해봐야 겠죠 :) [index.html] 지난 시간과 동일한 3개의 문단을 가진 지문을.. 앱 만들기/CSS 2023. 6. 14. CSS Position 이란? CSS 스타일 속성 중 Position 이란 웹 문서의 요소, 즉 이미지 나 텍스트 등등의 브라우저 화면(Viewport) 상에 보이는 내용들을 원하는 곳에 위치시키기 위해서 사용되는 CSS 속성을 말합니다. 예시로 3개의 문단을 웹페이지 내에서 이렇게 위치를 시키고 싶다면 position 속성을 사용하면 되겠습니다. Position 에는 대표적인 4가지 속성 값들이 있습 static, relative, absolute, fixed 입니다. 각 속성에 대해서 알아보겠습니다. static 기본 속성 으로 position 속성을 설정하지 않았을때 값과 동일 하며, 요소들의 기본 속성에 따라 기본 배치됩니다. 3개의 문단을 만들었다면 P태그는 블럭레별 요소로서 위에서 부터 아래로 배치됩니다. 만약 span 태.. 앱 만들기/CSS 2023. 6. 13. CSS 일반 형제 선택자(General Sibling Combinator) 일반형제 선택자 일반 형제 선택자란 동일한 부모 태그 밑에 여러 자식 태그가 있을 때 선택자로 명시된 첫 번째 선택자 다음에 오는 모든 자식 요소들 에 스타일을 주기 위한 선택자를 말합니다. 일반형제 선택자 문법을 먼저 살펴봅니다. 표현식1 ~ 표현식 2 { /* 스타일 */ } 표현식 1 에는 동일한 부모를 가진 형제 태그 혹은 전역 속성인 클래스 나 id가 들어갈 수 있습니다. ~ 는 일반형제 선택자에서 사용하는 필수 기호입니다. 표현식 2 에는 표현식 1 바로 다음에 있는 형제들 중 첫 번째 요소를 가리키는 태그 혹은 속성값을 지정할 수 있습니다.해당 요소부터 그 밑 모든 형제요소들은 스타일이 적용됩니다. 예제 입니다. [index.html] 일반 형제 선택자를 만들기 위해서 div 라는 공통 부모.. 앱 만들기/CSS 2023. 6. 11. CSS 인접형제 선택자(Adjacent Sibling Combinator) 인접형제 선택자 Adjacent는 '인접한'이라는 뜻입니다. 인접형제 선택자란 동일 부모 요소를 가진 형제 요소들 중 선택자 다음에 오는 자식 요소 하나에만 스타일을 주기 위한 선택자를 말합니다. 인접형제 선택자의 문법을 먼저 살펴봅니다. 표현식1 + 표현식 2 { /*스타일*/ } 표현식1 에는 동일한 부모를 가진 형제 태그 혹은 전역 속성인 클래스 나 id가 들어갈 수 있습니다. + 는 인접형제 선택자에서 사용하는 필수 기호입니다. 표현식 2 에는 표현식 1 바로 다음에 있는 형제들 중 첫 번째 요소를 가기 키는 태그 혹은 속성값을 지정할 수 있습니다. 예제를 만들어 봅니다. [index.html] 인접 형제 선택자를 위해서 div라는 공통 부모를 둔 h2 요소 3개(형제) 와 별도의 p 요소 하나를.. 앱 만들기/CSS 2023. 6. 10. CSS 하위선택자(Desecent Combinator) 하위(자손) 선택자. Desecent는 자손이라는 뜻입니다. 그래서 자손 선택자 또는 하위 선택자라고도 불립니다. 즉, HTML 부모 자손 관계를 활용한 CSS 선택자입니다. 자손에는 자식, 손자 등이 포함되겠습니다. 하위 선택자 문법 입니다. 상위요소 하위요소{ 속성:값; } 상위요소 다음에 오는 빈칸(공백문자) 이 바로 하위선택자의 기호가 되겠습니다. 이 공백문자 뒤에는 자손요소인 자식 태그 와 그 자식태그의 전역 속성인 id 혹은 class 등이 올 수 있습니다. 예제를 만들어 보겠습니다. [index.html] 하위 선택자를 위해서 div 부모 태그 밑에 자손요소로 h2 와 p태그를 구성했고 태그 안에 id와 class 전역 속성도 추가했습니다. This is a Descendant Combina.. 앱 만들기/CSS 2023. 6. 9. CSS Child Combinator(자식 선택자) CSS 자식 선택자 자식선택자는 부모와 자식관계를 가진 HMTL 태그 의 모습을 조합해서 만들 수 있는 선택자입니다. 자식 선택자의 문법은 하기와 같습니다. 부모태그 > 자식 태그 or 자식 전역속성{ /*스타일*/ } 예제를 만들어 보겠습니다. [index.html] div 가 부모이고 h2와 p 가 자식인 구조를 만들어 봅니다. This is a Child Combinator. This is a Child Combinator. This is a Child Combinator. This is a myParagraph. [main.css] 자식 선택자 를 여러 가지 형태로 만들어봅니다. div 부모 태그 > 자식 요소를 형태입니다. 자식 요소를 선택하기 위해서 아이디, 클래스 선택자와 태그, 클래스, 아.. 앱 만들기/CSS 2023. 6. 8. CSS Basic Combinator (일치선택자) CSS Basic Combinator CSS 일치 선택자는 기본 선택자들을 조합하여 사용하는 개념입니다. Combinator 역시 조합이라는 의미입니다. 일치 선택자의 문법은 각각의 선택자들을 붙여서 사용하면 됩니다. 선택자1선택자n{ /*스타일*/ } 예제를 구성해 보겠습니다. [index.html] 일치선택자를 만들기 위해서, h2 태그의 전역 속성으로 class와 id를 설정했습니다. This is a Basic Combinator. This is a Basic Combinator. This is a Basic Combinator. This is a myParagraph. [main.css] CSS 코드에서는 선택자들을 붙여서 코딩했습니다. h2.BC2#Bid처럼 3개의 선택자도 붙여서 만들어 봅니.. 앱 만들기/CSS 2023. 6. 7. CSS 기본 선택자 네가지 CSS 기본 선택자. CSS 기본 선택자는 총 네가지 가 있습니다. 전체 선택자, 태그(타입) 선택자, 클래스 선택자, 아이디 선택자 입니다. 특정 HTML 요소(element) 에 스타일을 적용하기 위한 기본적인 방법 입니다. 각각의 기본 선택자의 정의를 정리해봅니다. 전체 선택자 CSS에서 전체 선택자 란, CSS 스타일 문서에서 적용한 스타일이 모든 요소에 적용됨을 의미합니다. 전체선택자는 하기 문번 규칙을 가집니다. * { 속성 : 값; } 태그(타입) 선택자 태그(타입) 선택자는 특정한 HTML 요소(element) 타입을 선택하는 데 사용됩니다. HTML 요소들을 직접 선택자로 채용함으로써 해당 태그를 가진 요소들에 스타일을 적용하는 방식 입니다. 타입 선택자의 문법은 이러 합니다. 태그 { .. 앱 만들기/CSS 2023. 6. 6. CSS ID 선택자 란? ID 선택자. HTML 전역속성인 id 에를 활용하여 해당 요소(element)에 만 스타일을 적용할 수 있는 방법으로 ID 선택자 가 사용됩니다. ID 선택자의 문법은 하기와 같습니다. #id이름{ /* 스타일 지정 */ } 그럼 ID선택자 예제를 만들어 볼까요? [index.html] h2 와 p 태그의 전역속성으로 id를 설정하고 각각 이름을 지정합니다. CSS 에서 ID 선택자를 사용하기 위함 입니다. This is a myHeading. This is a myParagraph. CSS 파일에서는 ID선택자 문법규칙에 따라서 #ID이름 과 함께 스타일을 표기 합니다. 이렇게 설정하면 해당 ID에만 스타일 시트가 설정 됩니다. [main.css] /* CSS 코드 */ #myHeading { col.. 앱 만들기/CSS 2023. 6. 5. CSS 클래스 선택자 란? CSS 클래스 선택자 class 라는 전역 속성을 태그에 설정하여, 스타일 시트를 적용하기 위해서는 클래스 선택자를 사용해야 합니다. 그럼 예제를 통해서 살펴보도록 하겠습니다. 먼저, HTML 코드 중 span 과 p 태그의 속성으로 class 를 설정합니다. class 뒤에 값은 개발자가 원하는 이름을 설정합니다. span 과 p 태그에 동일한 class 이름이 설정되었죠. [index.html] This is a heading This is a paragraph. HTML 로 골격 즉 구조를 잡았으니 이제는 CSS 로 꾸며봅시다. [main.css] /* CSS 코드 */ .atom{ color : orangered; } CSS 코드에서는 바로 클래스 선택자를 사용했습니다. 클래스 선택자의 문법 은 .. 앱 만들기/CSS 2023. 6. 3. 이전 1 2 3 다음 💲 추천 글 반응형