CSS5 [CSS] 이런것도 가능했냐? CSS로 Button 보통 Button 이렇게 display를 바꿔주면 페이지에 Button 이렇게 white-space를 바꿔주면 텍스트가 에디터처럼 바뀐다 이제 에디터처럼 페이지에서 CSS코드를 직접 작성할 수 있게 해줘야 한다. 이건 CSS가 아니라 HTML에서 contenteditable 속성으로 해결할 수 있다. 이 속성에 true 값만 주면 끝이다. Button 이렇게 에디터(?)가 만들어졌다. 2023. 2. 15. [CSS] Flexbox을 사용해서 정말 예뻐지는 웹 레이아웃 만들기! CSS flexbox는 웹 페이지의 항목들을 유연하게 배치할 수 있는 방법을 제공한다. 플렉스 컨테이너를 사용하여 항목들을 수평적이거나 수직적으로 정렬할 수 있고, 정렬 순서도 바꿀 수 있다. CSS flexbox를 사용하면 웹 페이지의 레이아웃을 유연하게 제어할 수 있게 된다. flexbox를 사용하면 좋은점 코드가 간결해지고 쉽게 작성할 수 있다. 항목들을 수평적이거나 수직적으로 정렬할 수 있어서 레이아웃 제어가 용이해진다. 정렬 순서도 쉽게 바꿀 수 있어서 유연한 레이아웃 제어가 가능하다. 가로 정렬과 세로 정렬을 쉽게 제어할 수 있어서 웹 페이지의 레이아웃을 유연하게 제어할 수 있다. flexbox를 사용하는 방법 아래 HTML 샘플을 사용해서 flexbox의 여러 속성들과 그 값들로 레이아웃을 .. 2022. 12. 24. CSS 쉽게 배우기 | CSS 선택자(Selector) CSS로 HTML요소 선택하는 방법 안녕하세요 이번 편에서는 CSS 선택자 (selector)를 알아볼게요 CSS 선택자는 HTML 요소를 선택하는 방법입니다 HTML 요소를 선택하는 방법인 요소 이름으로 선택하기 요소의 클래스/아이디로 선택하기 요소와 요소의 관계로 선택하기 들을 알아볼게요 CSS 선택자가 중요한 이유는, 선택자를 사용해서 내가 원하는 요소만 스타일링할 수 있기 때문입니다 선택자를 알아보기 전에 CSS를 작성하는 것 먼저 알아볼게요 CSS 작성하는 방법 CSS를 작성하는 방법은 아주 간단합니다 먼저 내가 스타일링하고 싶은 요소를 쓰고 대괄호{ }를 열어주면 됩니다 예를 들어서 요소를 스타일 하고 싶으면 p {} 이렇게 p를 쓰고 대괄호를 열어줍니다 이렇게 하면 대괄호 안에 지정한 스타일.. 2021. 1. 4. CSS 쉽게 배우기 | 소개 CSS 소개, 뜻, 그리고 사용 방법 알아보기 안녕하세요 오늘부터 CSS (Cascading Style Sheet)를 알아볼게요 그럼 먼저 CSS가 뭘까요? CSS는 Cascading Style Sheet의 약자로 HTML를 예쁘게 꾸밀수있게 도와주는 웹 스타일링 언어 입니다 HTML이 민낯이라면 CSS는 민낯에 화장을 하는거라고 생각하면 됩니다 좀더 자세하게 풀어보자면 C - Cascading(카스케이딩) 카스케이딩의 사전적 의미는 '아래로 흘러가다' 입니다 S - Style(스타일) 디자인측면에서의 스타일을 말합니다 S - Sheet(시트) 문서를 말합니다 이렇게 '아래로 흘러가는 디자인 스타일 문서' 라고 풀수 있습니다? 뭔 개소리인가 싶죠? CSS의 특성상 제일 마지막에 작성된 스타일이 HTML요.. 2020. 12. 29. CSS-글꼴 | 티스토리 스킨 글꼴 바꾸기 내 블로그 스킨도 딱 좋고, 내용들도 알차고, 다 좋은데 가끔 뭔가 변화를 주고 싶을 때가 있나요? 너무 많은 변화는 뭔가 망칠까봐 무섭고, 부담도 되고... 글꼴이라도 바뀌면 좀 새로워 보일라나?? 그래서 오늘은 실패 없이 글꼴 바꾸는 방법을 알아볼게요. 1. 구글 폰트에서 언어를 한국어로 설정하세요 2. 마음에 드는 글꼴을 찾아 클릭해서 글꼴 페이지로 가세요 3. "스타일 선택"을 클릭하세요 4. 오른쪽 사이드바에서 "삽입"탭을 선택하고 "@import"방식을 선택하세요 5. @import와 font-family를 메모장에 잠깐 복사해두세요 **은 필요 없습니다** 6. 꾸미기 에서 "스킨 편집"을 열어주세요 7. 오른쪽 사이드바에서 "html 편집"을 클릭해주세요 8. 위에서 CSS를 클릭하세요 9.. 2020. 9. 7. 이전 1 다음 반응형
