초보자가 알아야 하는 CSS (티스토리 개설할 때 기초)

css

 

CSS(Cascading Style Sheets)는 HTML로 작성된 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어입니다. HTML이 웹 페이지의 구조와 내용을 담당한다면, CSS는 이러한 내용을 시각적으로 어떻게 보여줄지 결정하는 역할을 합니다.

 

CSS의 주요 역할:

• 디자인:

• 웹 페이지의 색상, 글꼴, 크기, 간격, 배경 등을 설정하여 시각적인 아름다움을 더합니다.
• 사용자 인터페이스(UI) 디자인을 통해 웹 페이지의 시각적 일관성을 유지하고 브랜드 아이덴티티를 표현합니다.

 

• 레이아웃:
  • 웹 페이지 요소들의 배치와 정렬을 제어하여 원하는 구조의 페이지를 만들 수 있습니다.
  • 반응형 웹 디자인을 구현하여 다양한 화면 크기와 장치에서 최적화된 레이아웃을 제공합니다.

 

• 접근성:
  • 시각 장애인을 위한 대체 스타일 시트를 제공하여 웹 페이지의 접근성을 향상시킬 수 있습니다.
  • 콘텐츠의 의미 구조를 유지하면서 시각적 표현을 분리하여 웹 접근성 표준을 준수합니다.

 

• 유지 보수:
  • 스타일 정보를 HTML 코드에서 분리하여 코드의 가독성과 유지 보수성을 높입니다.
  • 스타일 변경 시 CSS 파일만 수정하면 되므로 작업 효율성을 향상시킵니다.

 

HTML과 CSS의 상관관계:

• 분리된 역할:
  • HTML은 웹 페이지의 구조와 내용을 정의하고, CSS는 이러한 내용을 어떻게 보여줄지 스타일을 정의합니다.
  • 이러한 역할 분리는 코드의 가독성을 높이고 유지 보수를 용이하게 합니다.
• 상호 의존성:
  • CSS는 HTML 요소에 스타일을 적용하므로 HTML 구조를 이해해야 합니다.
  • HTML 요소의 클래스(class)나 아이디(id)를 사용하여 CSS 스타일을 선택하고 적용합니다.
• 코드 연결 방식:
  • CSS 코드는 HTML 문서 내에 <style> 태그를 사용하여 직접 작성하거나, 외부 CSS 파일을 연결하여 사용할 수 있습니다.
  • 외부 CSS 파일을 사용하는 것이 일반적이며, 코드의 재사용성과 유지 보수성을 높입니다.

 

반응형

---

 

서식만들기 와 CSS 적용해보기

 

단순히 아무것도 적용이 되지 않고, 일시적으로 표현은 되더라도 결국 디자인이 적용되지 않습니다.

그래서 CSS에 그 디자인을 적용해주는 것입니다.

 

티스토리 CSS편집

 

html편집하기로 들어가서 상단 두번째 CSS 을 클릭하기에 CSS에 코드를 넣고 적용하기를 해주시면 됩니다.

 

CSS

 

 

이렇게 적용한 CSS을  적용하기 위해서 서식을 만들어 주어야 합니다.

 

스킨편집 서식관리

 

서식관리를 들어간 후 서식쓰기를 하면 일반적으로 글을 작성하는 것처럼 글을 쓰는 페이지가 만들어집니다.
이때 CSS코드를 아래 그림처럼 HTML로 들어가 복사넣기 (Ctrl+V) 를 해주시면 됩니다.

티스토리 서식만들기

 

그럼 서식이 무슨용도로 사용할 것인지에 따라 제목을 붙혀 줍니다.

저는 목차때 사용할 디자인을 적용한 것이라서 목차관리라고 작성을 해보았습니다.

 

HTML

 

 

이렇게 적용을 한 후에 글쓰기에서 만들어진 서식을 활용해 보겠습니다.

 

서식활용

 

만든 서식이 보이고 이걸 선택을 해줍니다.

 

완성된 버튼

 

그럼 기본적인 버튼과 마우스를 올려놓았을 때 색상이 어떤색으로 변하는 지도 확인을 할 수 있습니다.

 

---

 

HTML과 CSS에서 사용되는 언어

코드 설명:

• HTML:
  • <a> 태그를 사용하여 링크를 생성합니다.
  • href 속성에 연결할 외부 웹사이트 주소를 입력합니다.
  • class 속성에 "button" 클래스를 추가하여 CSS 스타일을 적용합니다.
• CSS:
  • .button 클래스에 스타일을 적용하여 버튼 모양을 만듭니다.
  • display: inline-block;은 버튼을 인라인 블록 요소로 만들어 텍스트와 함께 배치할 수 있도록 합니다.
  • padding, font-size, text-align 등은 버튼의 크기, 글꼴, 정렬을 설정합니다.
  • background-color, color, border, border-radius는 버튼의 색상, 테두리 모양 등을 설정합니다.
  • cursor: pointer;는 마우스 커서를 손가락 모양으로 변경하여 클릭 가능한 요소임을 나타냅니다.
  • .button:hover는 마우스 커서를 버튼 위에 올렸을 때 배경색을 변경하여 시각적 효과를 줍니다.

추가 정보:

• target="_blank" 속성을 <a> 태그에 추가하면 새 창 또는 새 탭에서 링크를 열 수 있습니다.
• CSS 스타일을 변경하여 버튼의 모양과 색상을 원하는 대로 꾸밀 수 있습니다.
• 자바스크립트를 사용하여 버튼 클릭 시 추가적인 동작을 수행하도록 만들 수도 있습니다.

---

어떻게 좀 이해가 되셨습니까?

그럼 알맞는 티스토리 서식을 만들어보시길 바랍니다

이상 CSS에 대해 알아보았습니다