본문 바로가기
반응형

전체 글159

반응형 웹 만드는 법 (디바이스 종류별 width값) ● 반응형 웹을 만드는 방법 반응형 웹이란 각 디바이스의 크기와 뷰포트의 크기를 고려하여 어떠한 크기에서도 서비스를 제대로 화면에 보여주는 웹을 말합니다. 반응형 웹은 흑과 백처럼 이분법으로 판단하여 반응형 웹인지 아닌지를 판단할 수 있는 것이 아닙니다. 흑과 백에 더해 회색도 있어 얼마나 다양한 디바이스 화면과 다양한 사이즈에 대응하고 있는지에 따라 흑에 가까워질 수도, 백에 가까워질 수도 있습니다. 그럼에도 불구하고 우리는 반응형 웹이라고 부를 수 있는 기준이 필요합니다. 통상적으로 다음 두 가지 조건에 대해 어느 정도 크게 만족하고 있으면 반응형 웹이라고 부릅니다. 데스크탑, 태블릿, 모바일 디바이스에 대해 각각 서비스를 문제없이 이용할 수 있는 화면을 제공한다. 같은 디바이스여도 유저가 사용하기에.. 2023. 10. 18.
Html a태그 Html a태그 웹이 점점 화려해 지고 인터넷속도가 빨라지면서 웹페이지들은 점점 빨라지고 있고 디자인은 갈수록 중요해지고 있기 때문에 웹사이트에는(특히 국내에서) 정말 많은 이미지가 들어가고 있다. 근데 HTML 코드를 보다보면 정말 흔히 볼 수 있는 이미지버튼의 형태가 ​ ​ 이런 형태이다. 나도 회사처음 들어왔을때 내 바로 윗사람이 이렇게 쓰는것을 권고하기도 했었고 대부분의 사람들이 이런 형태로 이미지 버튼을 만들고 있는데 이건 정말 잘못된 형태의 html이다. 무엇보다 이렇게 써서 얹을 수 있는 잇점이 단 한개도 없다고 생각한다. ​ 저렇게 허위 a태그를 거는 상황은 100% 이미지를 버튼으로, 즉 클릭용으로 사용하기 위함이다. 그래서 img에 onclick 속성을 사용하고.. 2023. 10. 18.
<CSS> <a>태그 밑줄없애기, 색상 변경하기 - 태그 밑줄 없애기, 색상 변경하기 HTML에서 태그는 클릭 시 다른 페이지로 이동할 수 있도록 하는 기능을 가진 태그이다. 이 때, 태그를 넣어주면 자동으로 해당 값에는 밑줄과 색상이 변경되는 효과가 적용된다. 이것을 CSS 스타일시트를 이용하여 밑줄을 없애고, 색상을 변경할 수 있다. 1) 태그 적용 전 태그 적용 전 HTML BRAND CSS .title { font-size: 2em; } 2) 태그 적용 후 태그 적용 후 HTML BRAND 3) 태그 밑줄 없애기 text-decoration 속성 값 변경 후 text-decoration 속성에 none의 값을 주면 적용되어있던 효과가 사라진다. CSS a { text-decoration: none; } 4) 태그 색상 변경하기 폰트 색상 변경 .. 2023. 10. 18.
Html/ nav태그 html * nav 태그 html5에서 nav 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션(NAVigation) 역할을 담당하고 있는 태그 html5에서는 각 영역별로 그 의미를 나타내기 위하여 nav 태그와 같은 특정 태그를 사용하게 됨 일반적으로 웹사이트에서 주요한 네비게이션은 바로 '메뉴'! * 태그 : html5에서 태그는 현재 웹 사이트에서 주요한 지점으로 이동할 수 있는 네비게이션(NAVigation) 역할을 담당하고 있는 태그이다. 예전에는 메뉴든 뭐든 전부다 div에 넣는 것이 일반적이었지만, 이제 div는 일반적으로 떠다니는 내용을 넣을 때의 역할을 하는 경우가 많아졌고, html5에서는 각 영역별로 그 의미를 나타내기 위하여 태그와 같은 특정 태그를 사용하게 되.. 2023. 10. 18.
CSS Flex(Flexible Box) CSS Flex(Flexible Box) 대부분 사이트는 전체 레이아웃이 수직 구성이며 ‘위-아래’로 스크롤 하여 사용합니다. 레이아웃을 구성할 때 가장 많이 사용하는 요소(Elements)들이 기본적으로 블록(Block) 개념으로 표시(Display)되며 이는 뷰(View)에 수직(위에서 아래로)으로 쌓이기 때문에 수직 구성은 상대적으로 쉽게 만들 수 있습니다. 하지만 수평(왼쪽에서 오른쪽으로) 구성의 경우는 상황이 조금 다릅니다. 문제는 수평 구조를 만드는 속성이 명확하지 않았기 때문인데, 그래서 많은 경우 나 float 혹은 inline-block 등의 도움을 받았습니다. 하지만 이러한 방법들은 다양한 문제(Clear, White space 등, 해결은 가능하지만..)를 가지고 있기 때문에 결국 수.. 2023. 10. 18.
Html 태그 정리 Html 태그 정리 Html 태그 사용 빈도수 1. 텍스트 관련 태그 HTML 태그 (1) 태그 종류 설명 hn 제목 / h1~h6까지 숫자가 커질수록 글자 크기는 작아진다. p 텍스트 단락 / 내용이 길면 웹 브라우저 창의 너비에 맞게 자동으로 줄을 바꾼다. br 줄 바꿈 / 텍스트 단락 중 원하는 위치에서 줄을 바꾼다. blockquote 내용 인용 / 다른 내용보다 들여 쓰고 단락으로 표시한다. strong 중요한 텍스트를 굵게 표시한다. b 중요하지는 않지만 굵게 표시한다. em 중요한 텍스트를 기울게 표시한다. i 중요하지는 않지만 기울게 표시한다. ins 내용을 편집할 때 추가한 내용을 표시한다. del 내용을 편집할 때 삭제한 내용을 표시한다. sup 위 첨자 sub 아래 첨자 2. 목록 관.. 2023. 10. 18.
반응형

티스토리툴바