CSS17 [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만으로 애니메이션 만들어 봤니? CSS만으로 재밌는 애니메이션 만들기 안녕하세요 오늘은 CSS편의 마지막으로 애니메이션을 알아볼게요 CSS로 애니메이션이라... 디즈니 같은 애니메이션은 아니지만 재미있는 웹사이트를 만들기는 충분하죠 CSS의 애니메이션을 쉽게 이해하는 방법은 플립북 애니메이션을 생각하시면 됩니다 여러 장의 종이를 사용하는 대신에 CSS 애니메인션에서는 "xx부터 xx까지"라는 콘셉트를 사용합니다 이 범위안에서 요소의 스타일과 애니메이션의 반복, 그리고 속도를 조절하는 거죠 애니메이션을 사용하려면 애니메이션을 넣고 싶은 요소에 애니메이션 속성들을 정하고 키 프레 임안에 바꾸려는 스타일들을 작성하면 됩니다 애니메이션 속성들 알아보기 애니메이션에 필요한 속성들로는 animation-name (애니메이션 이름) animatio.. 2021. 6. 5. CSS 쉽게 배우기 | Pseudo Class(수도 클라스)2 CSS 수도 선택자로 요소 선택폭 넓히기 저번편에 이어서 수도 클라스 두번째 편입니다 지난번에 수도 클래스에는 상태에 관련되 선택자, 일반 선택자의 연장선, 이렇게 두 종류의 속성을이 있다고 했었죠 이번편에서는 그 두 번째인 일반 선택자의 연장선을 알아볼게요 일반 선택자의 연장선이란? 일반 선택자라고 하면 어감이 좀 이상하지만, 일반 선택자는 우리가 CSS편에서 처음으로 배운 선택자들을 말합니다 그럼 그 선택자들의 연장선이란 뭘까요? 연장선이라기 보다는 추가적으로 사용할수있는 선택자가 더 말이 맞을거 같네요 예시로 설명을 해볼게요 ... ... ... ... 이렇게 컨테이너 요소 안에 자녀 요소들이 있습니다 우리가 배운 일반 선택자로 자녀 요소들의 색상을 바꾸려면 .container p { color: .. 2021. 4. 28. CSS 쉽게 배우기 | Pseudo Class(수도 클라스) 1 CSS Pseudo Selector (수도 선택자) - CSS state(상태) 배우기 지금까지 여러가지의 CSS속성들과 사용방법, 그리고 반응형 디자인까지 알아봤습니다 그러나 한가지 아쉬운게 있다면, 스타일들이 재미가 없다는거죠 스타일들이 다 고정되있고, 뭔가 생동감이 없달까? 그래서 이번편에서는 지금까지 배운것들을 활용하면서 스타일에 생동감을 주는걸 알아볼게요 생동감을 주는데는 두가지 방법이 있는데요 하나는 요소의 상태에 따라서, 다른 하나는 애니메이션 입니다 이번편에서는 요소의 상태에 따라서 스타일을 바꾸는걸 알아볼거에요 CSS에서 요소의 상태란? 시작하기전에 먼저 집고 넘어갈게있죠? 요소의 상태란 뭘 말하는걸까요? 요소의 상태는 유저의 행동과 상호작용 하는걸 말합니다 유저가 마우스를 움직일때, 클.. 2021. 4. 11. CSS 쉽게 배우기 | 미디어 쿼리 (@media) CSS 미디어 쿼리 한눈에 알아보기 플렉스 박스와 그리드 레이아웃에서 계속 언급된 단어가 있죠: 반응형 디자인 근데 정확히 뭔지 설명이 잘 안된것같아서 이번편에서는 반응형 디자인과 미디어 쿼리의 연관성을 알아볼게요 웹에서 반응형 디자인의 뜻은? 스마트폰, 테블릿PC 이전에는 데스크탑PC에서 모든 웹사이트를 볼수있었는데요 시간이 지나서 스마트폰과 테블릿PC의 등장으로 이제는 웹사이트를 볼수있는 기기가 다양해졌죠 갑자기 웬 '라떼' 얘기냐? 스마트폰과 테블릿PC의 등장이 반응형 디자인에 큰 영향을 주었기 때문입니다 웹사이트를 PC에서만 볼때는 거의 모든 모니터의 크기가 똑같았기때문에 하나의 디자인만 있으면 충분했는데 스마트폰과 테블릿PC가 등장하면서 PC모니터에 맞춘 디자인이 스마트폰과 테블릿PC에는 맞지않.. 2021. 4. 6. CSS 쉽게 배우기 | Grid Layout (그리드 레이아웃) CSS 그리드 레이아웃 기초 알아보기 저번편에서 플렉스 박스에대해서 알아봤죠? 확실히 플렉스 박스를 사용하니까 반응형 디자인을 좀더 쉽고 빠르게 만들수 있습니다 그럼 그리드 레이아웃은 뭘까요? 플렉스 박스처럼 반응형 디자인을 만들때 사용하는 방법중 하나 입니다 그러면, 이 둘의 차이점은 뭘까요? 쉽게 말하자면 '차원' 입니다 플렉스 박스는 1차원적이고 그리드 레이아웃은 2차원적이라고 볼수 있겠습니다 플렉스 박스에서는 컨테이너의 반응 방향을 한 방향으로만 (가로 또는 세로) 설정할수있지만 그리드 레이아웃에서는 컨테이너의 반응 방향을 두 방향으로 (가로, 세로) 각각 따로 설정할수 있습니다 또다른 차이점은 디자인의 적용입니다 플렉스 박스의경우 대부분의 반응형 디자인이 컨테이너 요소에 적용되지만 그리드 레이아.. 2021. 3. 28. CSS 쉽게 배우기 | 플렉스 박스 (Flex-Box) CSS flex-box (플렉스 박스)로 반응형 디자인을 만들어 보자 안녕하세요 이번 편에서는 flex-box (플렉스 박스)를 알아볼 건데요 디스플레 이방 식중 하나로 반응형 디자인에서 많이 사용되는 방식입니다 이 디스플레이 방식의 장점은 지정된 요소들이 브라우저의 크기에 따라서 자동으로 재배치된다는 점입니다 플렉스 박스를 사용하려면 적용하고 싶은 요소들, 그리고 그 요소들을 하나로 묶어둘 컨테이너가 필요합니다 그럼 하나하나씩 살펴볼까요? display: flex 먼저 컨테이너의 디스플레이를 플렉스로 바꿔줍니다 그러면 이 컨테이너 안의 요소들을 여러 플렉스 속성을 사용해서 정렬할 수 있습니다 *중요! 플렉스 컨테이너 안의 모든 요소에 적용되지 않습니다. 컨테이너의 자식 요소들한테만 적용됩니다* .con.. 2021. 2. 15. CSS 쉽게 배우기 | 디스플레이 (Display) CSS display로 요소의 보이는 방식 설정하기 안녕하세요 이번 편에서는 요소의 표시 방식(?)에 대해서 알아볼게요 표시 방식이라고하면 뭔가 말이 좀 이상한데 쉽게 말해서 요소를 숨기고 싶다, 안 보이게 하고 싶다, 등 요소가 어떻게 표시돼야하는지를 설정하는 겁니다 모든 요소들은 기본의 표시 방식이 있는데 이 방식을 다르게 설정하면 스타일링의 자유도도 높아집니다 기본 디스플레이 방식 값 디스플레이를 배우기 전에 위에서 말한 요소들의 기본 디스플레이 값을 먼저 볼게요 요소들에 기본으로 설정된 디스플레이 값은 block 또는 inline입니다 block값은 요소들이 레고처럼 세로로 나열되는 방식이고 inline값은 요소들이 한 줄에 같이 나열되는 방식입니다 block을 기본 값으로 사용하는 요소중 예로는.. 2021. 2. 1. 이전 1 2 다음 반응형
