'개인공부/HTML5 + CSS3' 카테고리의 글 목록

본문 바로가기

[HTML+CSS] Do it! HTML5+CSS3 웹 표준의 정석 공부 후기 끝나지 않을 것 같은 HTML과 CSS 늪에서 드디어 벗어나게 되었다. 사실 이 책은 최근에 산 책은 아니고 예전에도 공부하려고 샀었는데 중간정도까지 공부하다가 허리 디스크가 터지는 바람에 치료받느라 녀석의 존재를 잊고 있었다. 그래서 이제서야 다시 마음을 잡고 새로운 마음으로 공부를 하기로 결심했다. 내가 이 책을 구입했었던 가장 큰 이유는 나는 내가 스스로 해냈다라는 느낌을 받아야 공부를 하기 때문에 단원이 끝날때마다 연습문제나 단원 마무리 문제가 있는 것을 찾고 있었는데 내가 찾아본 책들 중에서는 이 책이 어느정도 예제들도 있고 혼자 공부하기에 참 좋은 것 같아서 구입하게 되었다. 책에 대해 간단히 후기를 남겨보자면 세세하게 웹을 만들고 결과를 확인하는 것 까지 이미지와 함께 아주 잘 나와있어서 나.. 2020. 8. 24.

[HTML+CSS][CSS3와 애니메이션] 04 - 애니메이션 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 - 변형 [HTML+CSS][다재다능한 CSS3 선택자] 03 - 가상 클래스와 가상 요소 [HTML+CSS][다재다능한 CSS3 선택자] 02.. onelight-stay.tistory.com 트랜지션을 보다 더 부드럽고 쉽게 사용할 수 있는 애니메이션에 대해서 알아보자. CSS와 애니메이션 애니메이션은 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 전체적으로 부드럽게 변하는 애니메이션 효과를 만들어 낸다는 트랜지션과 비슷한 성격을 가지고 있긴 하지만, CSS 애니메이션은 시작해 끝내는 동안 .. 2020. 8. 12.

[HTML+CSS][플렉스 박스 레이아웃] 02 - 플렉스 박스 항목 배치를 위한 속성들 [HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들 [HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 [HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 [HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변.. onelight-stay.tistory.com 플렉스 박스 항목을 배치하기 위한 속성들에 대해서 알아보도록 하자. justify-content 속성 - 주축 기준의 배치 방법 지정 반응형 웹 디자인을 위해 가변 그리드 레이아웃 사용 시 글자 크기도 유동적으로 바뀌는 것이다. align-items 속성, align-self 속성 - 교차축 기준의 배치 방법 지정 교.. 2020. 8. 11.

[HTML+CSS][플렉스 박스 레이아웃] 01 - 플렉스 박스 레이아웃과 기본 속성들 [HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 [HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 [HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아.. onelight-stay.tistory.com 플렉스 박스 레이아웃이 무엇인지 살펴보고 플렉스 박스 레이아웃을 사용하기 위한 기본 속성들에 대해서 알아보도록 하자. 플렉스 박스 레이아웃 그리드 레이아웃을 기본으로 하며 플렉스 박스를 원하는 위치에 배치하는 것이다. 여유 공간에 따라 너비나 높이, 위치를 자유롭게 변형할 수 있기 때문에 화면 크기에 따라 레이아웃의 배치가.. 2020. 8. 10.

[HTML+CSS][미디어 쿼리] 03 - 미디어 쿼리를 사용해 웹 문서 만들기 [HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 [HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 [HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(v.. onelight-stay.tistory.com 이제껏 배워온 미디어 쿼리를 사용해 직접 웹을 만들어보는 시간을 가져보도록 한다. 레이아웃 구상하기 반응형 웹 디자인은 화면 해상도에 따라 화면 요소들을 옮길 수 있어야 하므로 처음부터 레이아웃을 잘 구상하고 옮길 부분을 결정해야 한다. 이때 모바일 화면을 시작으로 태블릿과 PC 화면 순으로 구상시 편하다. 우리는 화면 너비에 따라 카드.. 2020. 8. 9.

[HTML+CSS][미디어 쿼리] 02 - 미디어 쿼리 적용하기 [HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 [HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 -.. onelight-stay.tistory.com 미디어 쿼리에 대해 알아보았으니 미디어 쿼리를 적용하는 시간을 가져보도록 하자. 외부 CSS 파일 연결하기 외부 스타일 시트 파일로 따로 저장한 후 웹 문서 연결을 해보려 한다. - 태그 사용하기 - 특정 조건에 맞을 경우 지정한 CSS 파일을 가져와 적용하라는 의미로 가장 많이 사용하는 방법이다. 해당 태그는 태그 사이에 삽입.. 2020. 8. 6.

이전 1 2 3 4 ··· 11 다음

티스토리툴바