앱 만들기/CSS study41

• 

  9-1. CSS 태그 선택자 사용법 CSS 태그선택자란 HTML 태그 이름을 선택자로 사용한다.예를 들어, p 태그에 적용할 스타일을 정의하고 싶을때는. p{  스타일} 이렇게 정의한다. p 태그에는 별도의 속성을 주지 않더라도 p요소에 정의한 스타일이 적용된다. * 선택자 란?태그 선택자는 일반적으로 head 요소 사이에 정의한다.  head 요소 사이에는 대게 브라우저에게 정보를 알려주는 코드 를 넣는다.CSS 를 적용할 것임을 브라우저에게 알려주기 위해서닫힘 태그를 사용한다. Lorem Ipsum is simply dummy text of the printing and typesetting industry. It is a long established fact that a reader will be distrac.. 앱 만들기/CSS study 2024. 7. 2.

• 

  9강. CSS 클래스 선택자 사용방법 8-2강. CSS 테두리 와 마진, 패딩 속성 사용방법테두리 설정 방법을 먼저 알아보자div 요소는 이미 크기와 배경색상을 설정한 상태이다.1.  테두리 설정하기테두리 설정을 위한 CSS 속성은 border 이다. 속성값으로는 기본적으로 3가지 값을 설정soo0100.tistory.com  HTML 태그에 일일이 CSS 클래스 속성을 주고 스타일을 입히는 것은 반복되는 작업이 될 수 있다.예를 들어 여러 div 요소에 동일한 디자인 스타일을 입히고 싶은데, 똑같은 작업을 반복하니 말이다이럴 때 CSS 클래스 선택자 를 사용하면 쉽게 스타일을 적용할 수 있다. * 선택자(selector) 란? CSS 클래스 선택자 정의 방법은 . ClassName {스타일 } .(점) 다음에 클래스 이름을 적어주고 { }.. 앱 만들기/CSS study 2024. 7. 1.

• 

  8-2강. CSS 테두리 와 마진, 패딩 속성 사용방법 테두리 설정 방법을 먼저 알아보자div 요소는 이미 크기와 배경색상을 설정한 상태이다.1.  테두리 설정하기테두리 설정을 위한 CSS 속성은 border 이다. 속성값으로는 기본적으로 3가지 값을 설정할 수 있다. border : 테두리 설정 속성4px solid green : 테두리 굵기 , 테두리 선 스타일 , 테두리 선 색 굵기를 4px로 , 선 스타일은 솔리드 타입으로 줄. 줄의 색상은 녹색으로 설정했다. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.  브라우저에서 확인해보면,위와 같이 테두리가 잘 .. 앱 만들기/CSS study 2024. 6. 30.

• 

  8-1강. CSS 크기 속성 8강. CSS 속성 여러개 적용하는 방법HTML태그에 CSS를 여러개 적용해보자.방법은 각 스타일 사이에 ; (세미콜론) 으로 속성과 값을 구분해서 코딩하면 된다. Lorem Ipsum is simply dummy text of the printing and typesetting industry.  위 예제에서는backsoo0100.tistory.com CSS 의 여러속성 중 눈에 가장 손쉽게 띄는 속성은 바로 크기 조정이다.해당 속성을 div 태그에 정해두면 div 영역의 크기를 마음대로 조정할수 있다. It is a long established fact that a reader will be distracted by the readable content of a page when.. 앱 만들기/CSS study 2024. 6. 29.

• 

  8강. CSS 속성 여러개 적용하는 방법 HTML태그에 CSS를 여러개 적용해보자.방법은 각 스타일 사이에 ; (세미콜론) 으로 속성과 값을 구분해서 코딩하면 된다. Lorem Ipsum is simply dummy text of the printing and typesetting industry.  위 예제에서는background-color : pink (배경색)color : white (글자색)text-align : center (글자정렬) 세가지 속성은 ; 세미콜론으로 구분되며, 속성들이 적용된 p 요소는 브라우저에 하기처럼 예쁘게 표현된다.무미건조했던 HTML 웹문서에 드디어 스타일을 적용한 것 이다.   8-1강. CSS 크기 속성CSS 의 여러속성 중 눈에 가장 손쉽게 띄는 속성은 바로 크기 조정이다.해당 속성을 div.. 앱 만들기/CSS study 2024. 6. 28.

• 

  7강. CSS 적용하기 6강. div 태그 사용방법5강 img 태그 사용법4강. br 태그 사용법3강. P 태그 사용법2강. HTML 태그란 무엇일까?HTML에서 태그란 무엇일까?바로 기호로 둘러쌓인 HTML 문법의 가장 작은 단위 이다.  시작되는 태그 를 start tag(시soo0100.tistory.com CSS 는 HTML 요소에 디자인을 입히는 역할을 한다.CSS 는 Cascading Style Sheets 또는 스타일스 라고도 불리운다. CSS를 HTML에 적용하는 방법 중 하나는 HTML 태그의 style 속성을 추가 후 하기 포맷으로 설정한다. style = "CSS 속성 : 속성값" 속성은 적용하려는 디자인 모양과 형태를  뜻한다.속성값은 적용하는 값이 되겠다.(수치,색상...) Lorem Ipsum.. 앱 만들기/CSS study 2024. 6. 27.

• 

  티스토리 제목 라인 넣는 방법 티스토리 소제목 라인 만들기 티스토리 소제목 라인 만들기입니다. 소제목의 라인 만들기란 하기처럼 제목 좌측과 밑단에 선이 그러지는 것을 말합니다. 선의 두께 및 색상까지 모두 조정이 가능하고, 소 제목을 조금 더 부 soo0100.tistory.com 지난 시간 우리는 타이틀에 밑줄을 넣는 CSS 코드를 완성했습니다. 그럼 이번시간에는 자신의 티스토리에 해당 코드를 넣는 방법을 알아보겠습니다. 만들어놓은 CSS 코드를 넣는 다는것은 즉, 적절한 위치에 넣어야 하는것을 의미합니다. 여러분들의 티스토리 스킨이 다르기에 무조건 외워서 넣기보다는 넣는곳을 찾아서 넣을 수만 있다면스킨이 바뀌더라 언제든 편하게 편집이 가능합니다. 시작해볼까요? 1. 에디터에서 글자크기 팝업창을 선택합니다. 밑줄 생성을 원하는 타이.. 앱 만들기/CSS study 2023. 7. 17.

• 

  티스토리 소제목 라인 만들기 티스토리 소제목 라인 만들기입니다. 소제목의 라인 만들기란 하기처럼 제목 좌측과 밑단에 선이 그러지는 것을 말합니다. 선의 두께 및 색상까지 모두 조정이 가능하고, 소 제목을 조금 더 부각 해줄 수 있기 때문에 가독성 즉 글을 읽기에 편해지겠습니다. 물론 해당 스타일을 적용한다고 해서 SEO(검색엔진 최적화)에 유리하다거나 매우 좋다고 할 수는 없습니다. SEO는 HTML 태그의 목적과 구성이 정확해야 더 높은 점수를 받을 수 있으니 타이틀에는 타이틀 태그를 문단에는 문단 태그를 각자 목적에 맞는 태그를 구성하는 것이 좋겠습니다. 그럼, 다시 티스토리 소제목에 밑줄 긋는 방법에 대해서 계속 진행해 볼까요? 티스토리 소제목에 밑줄을 그어주는 CSS 스타일 선언은 여러 가지 방법이 있습니다. 여기서는 두 가.. 앱 만들기/CSS study 2023. 7. 16.

• 

  CSS 테두리 면 설정하기 와 티스토리 소제목 라인 만들기 앞 포스팅에서는 CSS border 속성을 가지고 네 면에 테두리 선을 그려보았습니다. 이번에는 네면이 아니 특정 면을 지정해서 해당 면에만 테두리 선을 그려봅니다. 티스토리 본문내용 중 소제목을 강조하기 위해서 많이 사용되는 방식입니다. 먼저 예제를 만들어 볼까요? CSS 스타일과 스타일이 적용될 P 요소(element)를 코딩합니다.border-top, right, bottom, left(위치)-style테두리의 4면을 각각 다른 선으로 구성합니다. 여기서 중요한 포인트는 border-top, right, bottom, left(위치)-style을 선언하여 원하는 위치에 속성값을 설정합니다. Individual Border Sides 2 different border styles. 결과는 하기와 같습.. 앱 만들기/CSS study 2023. 7. 14.

• 

  CSS 테두리 설정 CSS 테두리 설정에 대해서 알아봅니다. CSS 테두리 즉, border라는 영역은 CSS Box model 중 패딩 밖에 위치한 영역입니다. border는 style , width , color 속성을 통해서 테두리 선을 만들 수 있습니다. 이중 style 속성이 정의되지 않으면 width 나 color 속성값들이 있더라도 테두리선은 그려지지 않습니다. border-style border-style 속성은 선의 스타일을 선언합니다. 예제를 통해서 어떤 종류의 테두리 선을 정할 수 있는지 알아볼까요? CSS 선언부를 작성합니다. CSS Border 테두리 선 테스트를 위해서 P요소 문단들을 배치합니다. The border-style Property This property specifies what ki.. 앱 만들기/CSS study 2023. 7. 13.