앱 만들기/CSS study41

• 

  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.

• 

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

• 

  CSS 주요 font 속성 4가지 알아보기 CSS 주요 font 속성은 4가지로 나눌 수 있습니다. 1. font-family : 글꼴을 나타냅니다. 2. font-size : 폰트 사이즈입니다. 3. font-weight : 폰트 굵기입니다. 4. font-style : 일반 및 이탤릭 스타일을 나타냅니다. font-family , size, weight , style 예제를 만들어 봅니다, Welcome to my Website This is an example of using font-size, font-weight, font-style, and font-family properties in CSS. The font-size property sets the size of the text, the font-weight property sets.. 앱 만들기/CSS study 2023. 5. 12.

• 

  브라우저 기본 스타일 이란? '스타일'이란 HTML 웹 문서에 글꼴, 색상, 정렬 등의 디자인 요소들을 설정하는 것을 의미합니다. 그리고, 여러개의 스타일을 모아둔 것을 '스타일 시트'라고 부릅니다. CSS(Cascading Style Sheet) 에는 2가지 스타일 이 있습니다. '제작자(auther) 스타일' 과 '브라우 기본(default) 스타일'이며, '제작자 스타일'은 3가지 로 구성 되어 있습니다. 여기서 제작자 란 웹사이트 개발자가 되겠습니다. 1. 인라인 스타일 CSS 인라인 스타일 이란? CSS 인라인 스타일 이란? 특정 태그에만 CSS 스타일을 적용하는 것을 말합니다. 인라인 이란 표현 그대로, 특정 태그 내부에 전역 속성인 style 지정해서 사용할 수 있습니다. 그렇기에 해당 요소에 soo0100.tistor.. 앱 만들기/CSS study 2023. 5. 10.

• 

  CSS 스타일 시트 우선순위 CSS 스타일 시트 우선순위를 알아봅니다. 먼저, 테스트를 위해서 외부 스타일 시트를 만듭니다. h1{ padding : 20px; background-color: blueviolet; color: rgb(250, 248, 248); } p{ padding: 30px; background-color: green; color: black; } test.html 파일에 외부 스타일 시트를 위한 태그 및 태그 선택자 p 에 내부 스타일 시트 을 적용합니다. 그리고, 인라인 스타일 테스트를 위해서 동일하게 p 태그에 인라인 스타일을 적용합니다. DOCTYPE html> Document p{ padding: 30px; background-color: black; color: red; font-style: ital.. 앱 만들기/CSS study 2022. 11. 22.

• 

  CSS 외부 스타일 시트 란? 그리고 html 문서와 연동방법 알아보기 외부 스타일 시트 란? 외부에 별도의 파일로 저장된 스타일을 의미 합니다. 외부 CSS 파일을 사용하게 되면, 여러 웹문서에서 동일한 CSS 스타일 링을 한번에 적용할 수 있습니다. 즉, 내부 스타일 시트 혹은 인라인 스타일에 비해서 유지보수의 용이성 그리고 웹 문서의 파일 사이즈 등도 절약할 수 있기에 효율적입니다. 외부스타일 문법 외부 스타일 시트를 html 문서와 연결 시키는 방법은 head 태그사이에 link태그를 사용합니다. 태그 안에서는 rel 과 href 속성을 사용하여 stylesheet 와 css 파일 경로를 적어주면 됩니다. 외부스타일 시트 예제를 만들어 보겠습니다. [test.html] 외부 스타일 시트이란 외부 파일에 만들어둔 스타일 정보를 의미한다 해당 CSS파일을 연결하는 모든 .. 앱 만들기/CSS study 2022. 11. 18.

• 

  CSS 내부 스타일 시트 란? CSS 내부 스타일 시트 란? HTML 파일의 내부스타일 시트 예제를 만들어 보겠습니다. head 태그 안에 h1 과 p 태그에 적용될 스타일 정보를 코딩 합니다. 내부 스타일 시트에서 선언된 태그들은 모두 해당 스타일을 적용받는다 여러 태그에 동시에 적용할 수 있는 장점이 있다 해당 태그에는 p 선택자 스타일이 적용된다 브라우저에서 실행한 결과화면 입니다. 각 선택자 별로, 스타일 이 적용된 것을 살펴볼 수 있습니다. 내부스타일 시트는 하나의 html 파일내에서 재 사용시 유용한 스타일 방법 입니다. 하지만, 프로젝트 진행시에는 HTML 파일과 CSS 파일이 분리 되어 있지 않기때문에 유지보수 차원에서는 단점이 더 많다고 볼 수 있습니다. 이상으로, CSS 내부 스타일시트 예제 였습니다. 감사합니다. .. 앱 만들기/CSS study 2022. 11. 17.

• 

  CSS 인라인 스타일 이란? CSS 인라인 스타일 이란? 특정 태그에만 CSS 스타일을 적용하는 것을 말합니다. 인라인 이란 표현 그대로, 특정 태그 내부에 전역 속성인 style 지정해서 사용할 수 있습니다. 그렇기에 해당 요소에서만 스타일이 동작 합니다. 인라인 스타일의 문법은 하기와 같습니다. 그럼 인라인 스타일 예제를 만들어볼까요? CSS 인라인 스타일 인라인 스타일은 특정 태그안에 스타일을 직접 표현한다. 해당 태그에만 스타일이 적용되는 장점이 있다 여기서는 배경을 바꾼다 위 예제를 브라우저에 실행해보면 하기 결과 값과 같이 여러 태그 중 스타일을 적용한 태그 들에만 CSS 스타일 디자인이 적용된 것을 볼 수 있습니다. CSS 인라인 스타일을 만들기위한 style은 모든 태그들이 가지는 전역속성에 속합니다. 그렇기에 모든 .. 앱 만들기/CSS study 2022. 11. 16.

• 

  CSS 글자색 바꾸는 방법 CSS 글자색 바꾸는 방법 4가지에 대해서 알아봅니다. 1. 색상 이름으로 컬러 변경 2. #16진수로 컬러 변경 3. rgb로 컬러 변경 4. hsl로 컬러 변경 CSS에서 글자 색을 바꾸는 방법은 위 네 가지입니다. 하기 예제를 통해 본인 스타일로 변경 혹은 클론 코딩(똑같이 쳐보기)해보는 것이 중요합니다. 공부를 할 때 필기를 하면서 자신의 생각을 정리하는 것과 동일합니다. 컬러 색상이름으로 표현 컬러 #16진수로 표현 컬러 rgb로 표현 컬러 hsl로 표현 브라우저에서 확인한 결과값은 하기와 같습니다. 그럼 예제를 통해서 하나씩 살펴보겠습니다. 1. 색상 이름으로 컬러 변경 색상 이름값을 직접 표기하여 색상값을 나타내는 방법입니다. 가장 직관적인 방법 입니다. Visual Studio Code(V.. 앱 만들기/CSS study 2022. 11. 7.