본문 바로가기
반응형

앱 만들기/CSS35

티스토리 제목 라인 넣는 방법 티스토리 소제목 라인 만들기 티스토리 소제목 라인 만들기입니다. 소제목의 라인 만들기란 하기처럼 제목 좌측과 밑단에 선이 그러지는 것을 말합니다. 선의 두께 및 색상까지 모두 조정이 가능하고, 소 제목을 조금 더 부 soo0100.tistory.com 지난 시간 우리는 타이틀에 밑줄을 넣는 CSS 코드를 완성했습니다. 그럼 이번시간에는 자신의 티스토리에 해당 코드를 넣는 방법을 알아보겠습니다. 만들어놓은 CSS 코드를 넣는 다는것은 즉, 적절한 위치에 넣어야 하는것을 의미합니다. 여러분들의 티스토리 스킨이 다르기에 무조건 외워서 넣기보다는 넣는곳을 찾아서 넣을 수만 있다면스킨이 바뀌더라 언제든 편하게 편집이 가능합니다. 시작해볼까요? 1. 에디터에서 글자크기 팝업창을 선택합니다. 밑줄 생성을 원하는 타이.. 2023. 7. 17.
티스토리 소제목 라인 만들기 티스토리 소제목 라인 만들기입니다. 소제목의 라인 만들기란 하기처럼 제목 좌측과 밑단에 선이 그러지는 것을 말합니다. 선의 두께 및 색상까지 모두 조정이 가능하고, 소 제목을 조금 더 부각 해줄 수 있기 때문에 가독성 즉 글을 읽기에 편해지겠습니다. 물론 해당 스타일을 적용한다고 해서 SEO(검색엔진 최적화)에 유리하다거나 매우 좋다고 할 수는 없습니다. SEO는 HTML 태그의 목적과 구성이 정확해야 더 높은 점수를 받을 수 있으니 타이틀에는 타이틀 태그를 문단에는 문단 태그를 각자 목적에 맞는 태그를 구성하는 것이 좋겠습니다. 그럼, 다시 티스토리 소제목에 밑줄 긋는 방법에 대해서 계속 진행해 볼까요? 티스토리 소제목에 밑줄을 그어주는 CSS 스타일 선언은 여러 가지 방법이 있습니다. 여기서는 두 가.. 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. 결과는 하기와 같습.. 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.. 2023. 7. 13.
CSS 컬러 (백그라운드, 텍스트) 배경 색상과 텍스트 색상은 CSS 컬러로 가장 많이 설정하는 속성입니다. 예제를 만들어봅니다. CSS 선언부에서 h1과 p 요소(element)를 위한 스타일을 선언합니다. color : 컬러값 >> 텍스트 컬러를 설정합니다 background-color : 컬러값 >> 배경 컬러를 설정합니다. CSS Colors h1, p 태그 콘텐츠를 완성합니다. Hello world! What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unkno.. 2023. 7. 12.
CSS 배경이미지 전체화면이 되도록 설정하기 CSS 백그라운드 이미지 설정하기 CSS로 백그라운드 이미지 즉, HTML 특정요소의 배경 이미지를 설정할 수 있습니다. CSS 백그라운드 이미지 속성은 background-image 입니다. background-image의 예시를 만들어봅니다. Internal CSS 방식으로 결 soo0100.tistory.com 지난 시간 CSS 배경(background)을 설정할 수 있는 background 속성을 알아보았습니다. 주요 속성으로 하기 4가지 속성이 있었습니다. background-image background-position background-repeat background-attachment 오늘은 배경이미지를 브라우저 화면에 꽉 채우는 방법을 알아보겠습니다. 전체화면을 위해서는 containe.. 2023. 7. 11.
CSS 백그라운드 이미지 설정하기 CSS로 백그라운드 이미지 즉, HTML 특정요소의 배경 이미지를 설정할 수 있습니다. CSS 백그라운드 이미지 속성 과 속성값 설정 방법은 background-image : url("이미지 경로"); 입니다. background-image의 예시를 만들어봅니다. Internal CSS 방식으로 결과는 하기와 같습니다. 기본적으로 배경이미지는 X축과 Y축으로 반복되어져서 그려집니다. background-repeat : no-repeat , repeat-x, repeat-y 반복되지 않고 하나만 그려주기 위해서는 하기 속성을 추가 합니다. background-repeat: no-repeat; 해당 속성값에 의해서 이미지는 하나만 설정이 됩니다. X축과 Y축만 반복되게 이미지를 설정하고 싶을때는 repeat.. 2023. 7. 9.
CSS 글자 색상 지정하기 CSS에서 가장 많이 사용하는 속성 중 하나가 바로 글자 색상을 지정하는 것입니다. 다양한 글자 색상은 웹페이지의 필수요소 중 하나입니다. 하기와 같은 글자 색상은 어떻게 나타내는 것일까요? 위 예제를 위해서, HTML 웹 문서를 H3 요소와 P 요소로 구성합니다. Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl .. 2023. 7. 8.
CSS 구문(Syntax) 구조 CSS 구문, CSS 문법은 크게 선택자 와 선언부로 나뉩니다. W3school 에서 제공하는 CSS syntax 를 살펴보면 하기와 같습니다.선택자(Selector) 는 스타일을 적용하고 싶은 HTML 요소를 선택하는 역할을 합니다. 선언부는 속성(Property) 과 Value(값) 으로 구성되며, 선언이 하나이상일때는 세미콜론(;) 으로 구분해줍니다. 선언부는 중괄호{} 내에 기재합니다. p { color: red; text-align: center; }위 CSS 예제에서는 요소 의 글자 색상을 red 그리고 중앙정렬이 되게 스타일 합니다. CSS 를 HTML에 적용하면 하기 오른쪽과 같은 스타일이 적용된 웹문서를 얻을 수 있습니다.CSS Syntax 구조에 대해서 정리해보았습니다. 해당 자료는 W.. 2023. 7. 7.
CSS 박스모델 예제 CSS 박스모델이란? CSS 박스모델 웹페이지의 컨텐츠를 배치하는데 사용되는 레이아웃 모델 입니다. 조금 더 쉽게 이야기 하자면, 웹 문서의 내용을 박스형태로 각각 정의하는 것을 CSS 박스모델이라고 말합니다. 우 soo0100.tistory.com CSS 박스모델의 앞 포스팅에 말씀드린것처럼, CSS 박스모델은 마진,보더,패딩,컨텐츠 4가지 요소를 가집니다. CSS 박스모델은 모든 HTML 요소를 감싸고 있는 박스 입니다. 그렇기에 CSS 를 어떻게 스타일 하게 만드냐에 따라 동일한 HTML 웹문서도 다르게 보여지게 되는 것이죠. CSS 박스모델 예제를 하기처럼 구성해봅니다. Demonstrating the Box Model This text is the content of the box. We hav.. 2023. 7. 6.
CSS box-sizing 이란? box-sizing box-sizing 속성은 박스모델에서 width 크기를 설정할 수 있는 속성 값입니다. 기본값인 content-box 속성이 나타내는 width 크기는 단지 content 크기 입니다. 즉, 패딩과 여백, 마진은 width 값에서 빠져있습니다. content 크기만을 설정할때는 유용한 값이 되겠습니다. border-box 설정은 width 크기가 콘텐츠 크기 + 패딩 + 여백 + 마진 까지 모두 포함하기에 손쉽게 해당 태그요소의 크기를 설정할 수 있다는 장점이 있습니다. 예제를 만들어 봅니다. [HTML] 파일에서는 div 태그 요소 두개를 만듭니다. 박스모델을 설정하기 위함 입니다. div1 div2 [CSS] 파일에서는 box-sizing : border-box 와 기본 설정 타.. 2023. 6. 21.
CSS 박스모델이란? CSS 박스모델 웹페이지의 컨텐츠를 배치하는데 사용되는 레이아웃 모델 입니다. 조금 더 쉽게 이야기 하자면, 웹 문서의 내용을 박스형태로 각각 정의하는 것을 CSS 박스모델이라고 말합니다. 우리가 평소에 접속하는 웹 사이트들은 박스모델을 사용하여 내용들을 보여주고 있기에 하기 이미지로 손쉽게 이해가 갑니다. 이는 바로 네모난 브라우저안에서 가장 효율적으로 내용을 보여줄 수 있는 방법이기 때문이죠. CSS Box model 을 뜯어보면 4가지로 구성되어 있습니다. Content : 내용 (이미지와 텍스트) 등이 나타나는 콘텐츠 영역 입니다. Padding : 컨텐츠 주변의 여백을 공간 입니다. Border : 패딩과 컨텐츠를 둘러싼 영역입니다. 속성을 주어서 경계부분에 선을 표현할 수 있습니다. Margi.. 2023. 6. 20.
CSS 스타일 상속 CSS 스타일 상속 CSS 스타일 시트는 HTML태그 의 부모 자식 즉, 상속관계에 대해서 영향을 받습니다. 부모태그의 스타일 시트 속성값이 그대로 자식에게도 전해지는 것을 "스타일 상속" 이라고 말합니다. 예제를 보면서 알아보겠습니다. [html 코드] div 태그로 부모와 자식관계도를 만들었습니다. parent 는 child1, child2 두개의 자식을 가집니다. Parent Child1 Child2 Child3 [CSS 파일] CSS 파일에서는 부모 parent 의 너비 속성값을 설정 하였습니다. #parent{ font-size: 100px; } 웹브라우저에 실행한 결과는 부모와 자식관계 모두 글자의 크기(폰트 사이즈) 가 100px로 커졌습니다. 부모 자식 관계가 아닌 child3 은 상속관계.. 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.. 2023. 6. 17.
CSS position relative 속성 이란? position relative 속성 지난 시간 우리는 CSS 에서 position 이란 무엇인지 그리고 position 의 기본 값인 static 에 대해서 알아보았습니다. 이번 시간에는 relative 속성에 대해서 확인 해보겠습니다. 먼저 static 과 relative 결과값을 확인 한 후 어떤 차이점이 있는지 알아볼까요? static 은 요소의 속성(블럭,인라인)에 따라서 배치가 되었습니다. 기본 값으로 position 속성을 적지 않았을때와 동일했었죠. 그에 반해 relative 는 위치 값을 조정할 수 있습니다. 위치 값의 기준이 되는것은 바로 원래 그 요소의 기본 자리 입니다. 무슨 말인고 할때는 코딩을 해봐야 겠죠 :) [index.html] 지난 시간과 동일한 3개의 문단을 가진 지문을.. 2023. 6. 14.
CSS Position 이란? CSS 스타일 속성 중 Position 이란 웹 문서의 요소, 즉 이미지 나 텍스트 등등의 브라우저 화면(Viewport) 상에 보이는 내용들을 원하는 곳에 위치시키기 위해서 사용되는 CSS 속성을 말합니다. 예시로 3개의 문단을 웹페이지 내에서 이렇게 위치를 시키고 싶다면 position 속성을 사용하면 되겠습니다. Position 에는 대표적인 4가지 속성 값들이 있습 static, relative, absolute, fixed 입니다. 각 속성에 대해서 알아보겠습니다. static 기본 속성 으로 position 속성을 설정하지 않았을때 값과 동일 하며, 요소들의 기본 속성에 따라 기본 배치됩니다. 3개의 문단을 만들었다면 P태그는 블럭레별 요소로서 위에서 부터 아래로 배치됩니다. 만약 span 태.. 2023. 6. 13.
CSS 일반 형제 선택자(General Sibling Combinator) 일반형제 선택자 일반 형제 선택자란 동일한 부모 태그 밑에 여러 자식 태그가 있을 때 선택자로 명시된 첫 번째 선택자 다음에 오는 모든 자식 요소들 에 스타일을 주기 위한 선택자를 말합니다. 일반형제 선택자 문법을 먼저 살펴봅니다. 표현식1 ~ 표현식 2 { /* 스타일 */ } 표현식 1 에는 동일한 부모를 가진 형제 태그 혹은 전역 속성인 클래스 나 id가 들어갈 수 있습니다. ~ 는 일반형제 선택자에서 사용하는 필수 기호입니다. 표현식 2 에는 표현식 1 바로 다음에 있는 형제들 중 첫 번째 요소를 가리키는 태그 혹은 속성값을 지정할 수 있습니다.해당 요소부터 그 밑 모든 형제요소들은 스타일이 적용됩니다. 예제 입니다. [index.html] 일반 형제 선택자를 만들기 위해서 div 라는 공통 부모.. 2023. 6. 11.
CSS 인접형제 선택자(Adjacent Sibling Combinator) 인접형제 선택자 Adjacent는 '인접한'이라는 뜻입니다. 인접형제 선택자란 동일 부모 요소를 가진 형제 요소들 중 선택자 다음에 오는 자식 요소 하나에만 스타일을 주기 위한 선택자를 말합니다. 인접형제 선택자의 문법을 먼저 살펴봅니다. 표현식1 + 표현식 2 { /*스타일*/ } 표현식1 에는 동일한 부모를 가진 형제 태그 혹은 전역 속성인 클래스 나 id가 들어갈 수 있습니다. + 는 인접형제 선택자에서 사용하는 필수 기호입니다. 표현식 2 에는 표현식 1 바로 다음에 있는 형제들 중 첫 번째 요소를 가기 키는 태그 혹은 속성값을 지정할 수 있습니다. 예제를 만들어 봅니다. [index.html] 인접 형제 선택자를 위해서 div라는 공통 부모를 둔 h2 요소 3개(형제) 와 별도의 p 요소 하나를.. 2023. 6. 10.
CSS 하위선택자(Desecent Combinator) 하위(자손) 선택자. Desecent는 자손이라는 뜻입니다. 그래서 자손 선택자 또는 하위 선택자라고도 불립니다. 즉, HTML 부모 자손 관계를 활용한 CSS 선택자입니다. 자손에는 자식, 손자 등이 포함되겠습니다. 하위 선택자 문법 입니다. 상위요소 하위요소{ 속성:값; } 상위요소 다음에 오는 빈칸(공백문자) 이 바로 하위선택자의 기호가 되겠습니다. 이 공백문자 뒤에는 자손요소인 자식 태그 와 그 자식태그의 전역 속성인 id 혹은 class 등이 올 수 있습니다. 예제를 만들어 보겠습니다. [index.html] 하위 선택자를 위해서 div 부모 태그 밑에 자손요소로 h2 와 p태그를 구성했고 태그 안에 id와 class 전역 속성도 추가했습니다. This is a Descendant Combina.. 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 부모 태그 > 자식 요소를 형태입니다. 자식 요소를 선택하기 위해서 아이디, 클래스 선택자와 태그, 클래스, 아.. 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개의 선택자도 붙여서 만들어 봅니.. 2023. 6. 7.
반응형