앱 만들기396

• 

  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 study 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 study 2023. 6. 7.

• 

  CSS 기본 선택자 네가지 CSS 기본 선택자. CSS 기본 선택자는 총 네가지 가 있습니다. 전체 선택자, 태그(타입) 선택자, 클래스 선택자, 아이디 선택자 입니다. 특정 HTML 요소(element) 에 스타일을 적용하기 위한 기본적인 방법 입니다. 각각의 기본 선택자의 정의를 정리해봅니다. 전체 선택자 CSS에서 전체 선택자 란, CSS 스타일 문서에서 적용한 스타일이 모든 요소에 적용됨을 의미합니다. 전체선택자는 하기 문번 규칙을 가집니다. * { 속성 : 값; } 태그(타입) 선택자 태그(타입) 선택자는 특정한 HTML 요소(element) 타입을 선택하는 데 사용됩니다. HTML 요소들을 직접 선택자로 채용함으로써 해당 태그를 가진 요소들에 스타일을 적용하는 방식 입니다. 타입 선택자의 문법은 이러 합니다. 태그 { .. 앱 만들기/CSS study 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 study 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 study 2023. 6. 3.

• 

  CSS 타입 선택자(Type selector) 란? 타입 선택자 혹은 태그 선택자라고 불리는 Type seletor 의 CSS 쓰임을 알아보겠습니다. Type selector 타입 선택자는 특정한 HTML 요소(element) 타입을 선택하는 데 사용됩니다. HTML 요소들을 직접 선택자로 채용함으로써 해당 태그를 가진 요소들에 스타일을 적용하는 방식 입니다. 타입 선택자의 문법은 이러 합니다. 태그 { /* 스타일 적용 */ } 스타일이 적용되기를 원하는 태그 이름을 선택자 에 코딩하면 되는 것이죠. 예제를 만들어 볼까요? 먼저 CSS 파일을 하기처럼 만듭니다. 해당 코드는 각각의 태그에만 스타일이 적용되는 내용 입니다. [main.css] /* CSS 코드 */ h1 { color: blue; } p { font-size: 18px; } input {.. 앱 만들기/CSS study 2023. 6. 2.

• 

  CSS 전체선택자 란? 전체선택자(Universal selector) 란? CSS에서 전체 선택자 란, CSS 스타일 문서에서 적용한 스타일이 모든 요소에 적용됨을 의미합니다. 전체선택자는 하기 문번 규칙을 가집니다. * { 속성 : 값; } 실제 예제로 전체선택자를 알아보겠습니다. main.css 파일을 만들고 컬러 와 폰트 굵기를 나타내는 속성 과 값을 지정 합니다. /* 전체 선택자 */ * { color: blue; font-weight: bold; } index.html 하기 html 파일 예제 에서 link 방식으로 css 파일을 연결하고 있습니다. 내부 스타일 시트 방식으로 스타일을 코딩해도 됩니다. Hello, World! This is an example paragraph. This is another para.. 앱 만들기/CSS study 2023. 6. 1.

• 

  HTML 태그 와 속성 이란? 태그 란 HTML의 기본 문법은 하기와 같습니다. 내용 예를 들어보면 하기처럼 표기할 수 있습니다 hello 은 시작 태그라 부르며 는 종료 태그 라고 부릅니다. 태그 사이의 값은 "내용", "content"라고 불립니다. 태그는 기본적으로 시작 태그와 종료 태그 그리고 중간의 내용으로 구성되어 있으며, 이 덩어리를 요소(element)라고 합니다. 태그 중에는 닫힌 태그가 없는 비어있는 태그도 있습니다. 예를 들면, 등등이 있습니다. 닫힌 태그가 없는 대신 마지막 부분에 / 를 적어도 되고 적지 않아도 됩니다. 이렇게 적어도 되고 안 적어도 되는 자유로운 방식은 html5 버전부터 적용되기 시작했습니다. 속성 태그는 태그자체의 기능이 있습니다. 태그는 가장 큰 제목 크기를 설정하며 h6 은 가장 작은 .. 앱 만들기/HTML5 study 2023. 5. 31.

• 

  브라우저 스타일 초기화 하는 방법 CSS 에서 웹 페이지 스타일을 정하지 않아도 기본적으로 적용되는 스타일이 있습니다. 이를 브라우저 기본 스타일 이라고 표현합니다. 브라우저 기본 스타일 이란? '스타일'이란 HTML 웹 문서에 글꼴, 색상, 정렬 등의 디자인 요소들을 설정하는 것을 의미합니다. 그리고, 여러개의 스타일을 모아둔 것을 '스타일 시트'라고 부릅니다. CSS(Cascading Style Sheet) 에는 2 soo0100.tistory.com 크로스 브라우징 이란 이런 브라우저 기본 스타일은 브라우저 마다 약간의 차이를 가지고 있습니다. 개발된 하나의 웹 페이지가 모든 브라우저에서 동일하게 보이기 위해서는 바로 이런 차이를 제거 해주어야 합니다. 이를 크로스 브라우징 이라고 합니다. 크로스 브라우징이란, 여러 브라우저에서 결.. 앱 만들기/CSS study 2023. 5. 30.

• VSC 자주사용되는 유용한 단축키 자주사용되는 단축키 자주 사용되는 단축키 를 정리하기에 앞서 일반적으로 윈도우의 Ctrl 키는 Mac의 Cmd 와 일치합니다. 그럼 단축키를 정리 해볼까요? 설정 윈도우 : Ctrl + , Mac : Cmd + , 사이드 바 열고닫기 윈도우 : Ctrl + B Mac : Cmd + B 편집창 열기 윈도우 : Ctrl + \ Mac : Cmd + \ 편집창 닫기 윈도우 : Ctrl + W Mac : Cmd + W 이름으로 파일 검색 윈도우 : Ctrl + P Mac : Cmd + P 모든명령 표시 윈도우 : Ctrl + Shift + P Mac : Cmd + Shift + P 파일내 검색 윈도우 : Ctrl + F Mac : Cmd + F 파일내 내용 바꾸기 윈도우 : Ctrl + H Mac : Cmd +.. 앱 만들기/비쥬얼스튜디오 코드 2023. 5. 29.