'HTML' 태그의 글 목록 (4 Page)

본문 바로가기

[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.

[HTML+CSS][미디어 쿼리] 01 - 미디어 쿼리 이해하기 [HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 [HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과.. onelight-stay.tistory.com 미디어 쿼리가 무엇인지에 대해 알아보고 미디어 쿼리를 사용할 때 고려해야 할 여러 조건들에 대해서 알아보도록 하자. 미디어 쿼리 CSS3 모듈 중에 하나로 사용자가 어떤 미디어를 사용하는가에 따라 사이트의 형태가 바뀌도록 CSS를 작성하는 방법이다. 미디어 쿼리 구문 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 .. 2020. 8. 5.

[HTML+CSS][반응형 웹] 03 - 가변 레이아웃과 가변 요소 [HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 [HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 -.. onelight-stay.tistory.com 가변 그리드 레이아웃에 대해 배웠으니 레이아웃이 변경될 때에도 다른 요소들도 자연스럽게 표현 될 수 있게 하는 가변 요소들에 대해서 알아보도록 하자. 가변 글꼴 반응형 웹 디자인을 위해 가변 그리드 레이아웃 사용 시 글자 크기도 유동적으로 바뀌는 것이다. em 단위 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로 지.. 2020. 8. 4.

[HTML+CSS][반응형 웹] 02 - 가변 그리드 레이아웃 [HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 - 변형 [HTML+CSS][다재다능한 CSS3 선택자] 03 - 가상 클래스와 가상.. onelight-stay.tistory.com 사이트의 모든 요소들을 상대적인 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여준다는 가변 그리드 레이아웃에 대해서 알아보도록 하자. 그리드 시스템 (grid system) 그리드 시스템은 웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준으로 화면을 몇 개의 칼럼으로 나누어 요소들을 배치해 필요할 때.. 2020. 8. 3.

[HTML+CSS][반응형 웹] 01 - 반응형 웹과 뷰포트(viewport)의 개념 [HTML+CSS][CSS3와 애니메이션] 03 - 트랜지션 [HTML+CSS][CSS3와 애니메이션] 02 - 변형과 관련된 속성들 [HTML+CSS][CSS3와 애니메이션] 01 - 변형 [HTML+CSS][다재다능한 CSS3 선택자] 03 - 가상 클래스와 가상 요소 [HTML+CSS][다재다능한 CSS3 선택자] 02.. onelight-stay.tistory.com 하나의 사이트를 제작해 여러 기기에서 각 형식에 맞게 볼 수 있는 반응형 웹에 대해서 알아보도록 하자. 우리가 여태까지 배운 것들을 토대로 웹사이트를 만든다면 웹 사이트 화면 너비를 노트북 화면 너비에 맞추어 고정시키거나 큰 화면을 고려해 내용을 중앙에 오도록 한 후 양쪽에 여백을 표시하는 방향으로 웹을 디자인할 것이다. 하지만 최근.. 2020. 8. 2.

이전 1 2 3 4 5 6 7 ··· 13 다음

티스토리툴바