반응형 programming/TroubleShootInG44 html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 초기화를 진행한 html5 태그들은 서로 붙어있고 보기가 불편하다. 여백은 가시성을 높여지고 화면에 표시되는 콘텐츠들의 구역을 구분짓는 역할을 한다. 초기화 되어 서로 붙어있는 태그들에 여백을 줄 때는 css3의 바깥여백과 안쪽여백을 줄 수 있다. 바깥여백은 margin 속성을 안쪽여백은 padding 속성을 이용한다. html5 css3 여백 주기 붙어있는 요소들에 간격 추가하기 margin padding 사용 html5 태그를 이용하여 레이아웃을 할 때 먼저 모든 태그들의 요소들에 대한 초기화를 한다. 초기화 이후 다닥다닥 붙어있는 모양새가 너무 보기 싫다. 여백을 주면 조금은 나아보이고 화면에 표시할 콘텐츠들이 항목별로 구분되는 효과를 볼 수 있다. 여백을 주는 방법은 초기화할 때 사용했던 marg.. 2022. 11. 21. 웹브라우저 해상도 크기 표시 너비와 높이 구하기 html 코딩을 할 때 웹표준과 반응형을 살펴야 하며 고민되는 것이 해상도이다. 웹브라우저에서 웹문서가 표시되는 영역은 별개로 존재하기에 화면에 크기를 표시하면 html 코딩을 하는데 조금은 수월하다. 중요한 것은 실제로 웹서비스를 하면서 관리자 화면에서 실제 모바일 기기 테스트 할 경우 도움이 크다. 웹영역의 크기를 구할 때는 window 객체를 사용한다. 웹브라우저 해상도 크기 표시 너비와 높이 구하기 홈페이지를 만들 때 웹표준을 따르고 반응형으로 만들 때 항상 고민되는 것이 해상도이다. 정확하게는 웹브라우저에 표현되는 문서의 크기일 것이다. 웹브라우저의 크기가 변경되면서 해상도의 크기를 확인할 때 개발자모드를 사용할 수도 있지만 수시로 켰다 끄고 하는 것도 불편하다. 수시로 가시적으로 확인하면서 확.. 2022. 11. 20. html 네비게이션 메뉴 만들기 ul 태그의 사용 html에서 네비게이션바 또는 메뉴를 만들 때 ul 태그를 사용한다. ul 태그는 목록을 만들어주는 태그로 주로 목차같은 요소로 사용된다. 쓰임새가 정갈하기에 익숙해지면 여러모로 편리한 태그이다. ul 태그는 ol 태그와 비교되며 unorderd list 의 약자이다. html 네비게이션 메뉴 만들기 ul 태그의 사용 이제 메뉴를 만들차례다. 데이터베이스에 자료를 넣고 불러오면 좋겠지만 지금은 홈페이지 복구가 목적이기 때문에 이전에 만든 html5 템플릿을 그대로 사용하려고 한다. 메뉴의 구성은 ul 태그를 이용하여 제작할 것이며 4가지 정도만 넣어볼 생각이다. 뜻하지 않은 이유로 처음부터 다시 하려니 이것저것 손이 많이 가게 된다. html5 템플릿은 이전에 작성한 내용을 참고해 본다. 아주 간단한 형.. 2022. 11. 20. html5 css3 웹페이지 초기화 모든 css 스타일 요소를 무효화 html5로 태그를 나열하기 전에 css3 를 사용하여 모든 여백을 초기화할 수 있다. 이것은 모든 웹브라우저가 가진 기본값이 조금씩 다르거나 같은 웹페이지라도 다르게 설정되기 때문이다. 초기화 한 후에 웹표준을 위한 작업과 반응형 작업을 통해 화면을 동일하게 구성할 수 있다. html5 css3 웹페이지 초기화 모든 css 스타일 요소를 무효화 웹페이지를 만들 때 처음 하는 작업이 웹페이지의 모든 css 스타일 요소를 무효화하고 초기화하는 것이다. 이것을 왜 하는지는 처음에는 몰랐지만 시간이 지나면서 모든 웹브라우저의 호환성을 위한 것을 알게 되었다. 처음에는 모르고 작업했지만, 지금이라도 이해했으니 다행 지구상에 존재하는 모든 웹브라우저는 html5 의 표준화된 마크업 또는 시맨틱 태그를 사용하더라도.. 2022. 11. 19. 이전 1 ··· 4 5 6 7 8 9 10 11 다음 반응형
