Programming/HTML5 & CSS316 [CSS3] a 태그를 비활성 시키는 방법 안녕하세요. 혀코입니다. 이번 시간에는 태그를 비활성 시키는 방법에 대해서 알아보겠습니다. 보통 태그는 페이지 이동이나 같은 페이지 내에서 단락 이동할 때 쓰입니다. 하지만 때에 따라서 이러한 기능을 하지 못하도록 비활성화 해야합니다. 가령 현재 페이지 경로를 표시하는 breadcrumb 에서 현재 페이지를 나타내는 텍스트에 a 태그가 사용되어 있다면 이 때 a 태그는 비활성화 해줘야합니다. a:last-child { pointer-events: none } 이렇게 태그를 비활성 시키는 방법에 대해서 알아봤습니다. 해당 정보가 도움이 되셨다면, 공감과 구독 부탁 드립니다. 감사합니다. :) 2022. 8. 16. [HTML5] Input 태그의 type 사용 방법 총정리 안녕하세요. 혀코입니다. 이번 시간에는 Input 태그의 type 사용 방법 총정리를 해볼까 합니다. Input 태그의 type에는 다음 10가지가 있습니다. 1. text 2. email 3. password 4. tel 5. datetime-local 6. date 7. week 8. month 9. time 10. number 1. text text는 Input type의 기본 값 입니다. 보통 문자열을 입력받을 때 사용합니다. 이때, label 태그의 for 값과 input 태그의 id 를 같게 해서 연동해 줍니다. name 값은 사용자가 입력한 값과 쌍으로 name: john 형식으로 입력됩니다. Name: 2. email 이메일을 입력받을 때 사용합니다. 이메일과 pattern에 정의된 형식이.. 2022. 8. 2. [HTML5] a 태그와 button 태그의 사용방법의 차이 안녕하세요. 혀코입니다. 이번 시간에는 HTML5의 태그와 태그의 사용방법의 차이에 대해서 알아보겠습니다. 태그 태그는 다른 페이지로 이동하거나 같은 페이지에서 id 값이 지정되어 있는 위치로 이동할 때 사용합니다. Tistory href은 이동할 웹사이트 페이지 주소나 태그의 id 값을 지정할 수 있습니다. title은 툴팁으로 링크가 어떤 내용인지 알려줍니다. target은 _blank를 지정해서 새로운 탭에서 href에 지정된 웹사이트 페이지 주소로 이동할 수 있습니다. 태그 태그를 사용하는 부분을 제외한 나머지 모든 클릭 가능한 부분에 사용합니다. Click Me! type으로 지정할 수 있는 값에는 button, reset, submit이 있습니다. 폼을 입력해서 사용자가 입력한 데이터를 받아 .. 2022. 7. 29. [CSS3] ::marker 를 사용해서 <li> 태그에 이모티콘을 추가하는 방법 안녕하세요. 혀코입니다. 리스트 텍스트 앞에 이모티콘을 사용하는 방법이 있나 고민하던 차에 방법을 알아냈습니다. 그래서 이번 시간에는 ::marker를 사용해서 태그에 이모티콘을 추가하는 방법에 대해서 알아보겠습니다. HTML5 CSS3 JavaScript HTML5 기본 구조를 짜고, li 를 잡고 ::marker를 사용하고 content: ' ' 안에 원하는 이모티콘을 넣어주시면 됩니다. 그러면 아래와 같이 브라우저에서 보여지게 됩니다. ::before 를 사용할떄는 list에 list-style-type: none 속성이 있어야만 bullet 표시가 안나는 데 ::marker를 사용할 때는 태그에 list-style-type: none 속성이 없어도 bullet 표시가 안되는 점 참고 하시면 될 것.. 2022. 7. 28. [CSS] :is pseudo selector 사용하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 :is pseudo selector 을 사용하는 방법에 대해서 알아보겠습니다. :is pseudo selector 을 사용하면 상위 요소 셀렉터들을 하나로 묶어서 사용할 수 있습니다. header button:hover, nav button:hover, article button:hover { padding: 5px 10px; color: white; background: green; } 위와 같은 코드가 있을 때, :is pseudo selector 을 사용하면 상위 요소들을 하나로 묶어서 사용할 수 있기 때문에 코드 사용량을 줄일 수 있습니다. :is(header, nav, article) button:hover { padding: 5px 10px; color:.. 2022. 7. 22. [HTML5] script 태그의 async와 defer의 차이점 안녕하세요. 혀코입니다. 이번 시간에는 script 태그의 async와 defer attribute의 차이점에 대해서 알아보겠습니다. 웹사이트의 어느 한 페이지를 로드할 때, html 파일의 첫번째 줄부터 마지막 줄 까지 차례대로 파싱(parsing)해서 웹브라우저에 출력해 줍니다.이때, JavaScript 코드의 경우, 대부분의 경우 body 태그 안의 태그(element)들을 잡아서 변형을 해야하는 경우가 대부분인데 JavaScript 코드가 head 태그 안에 있을 경우, body 태그의 태그들이 아직 읽히기 전이여서 에러를 발생하게됩니다. 그래서 이러한 현상을 방지하기 위해서 body 태그의 맨 마지막 부분에 JavaScript를 추가합니다. 그러나 이 경우에 웹페이지 사이즈가 아주 큰 경우, 웹.. 2022. 7. 19. [CSS3] 레이아웃 오류 디버깅하는 방법 안녕하세요. 혀코입니다. 이번 시간에는 레이아웃 오류 디버깅하는 방법에 대해서 알아보겠습니다. JavaScript 에서는 오류가 나면, console.log를 찍어서 연산이 잘 되고 있는지 확인하는 과정이 있으나, 웹사이트의 레이아웃이 오류가 나면 각 노드당 css 속성이 잘 들어가 있는지 확인하느라 시간이 상당히 오래 걸리는 편입니다. 그래서 레이아웃 오류시 디버깅을 하려면 두가지 방법을 추천 드립니다. 첫번째, 모든 노드에 outline을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다. * { outline: 1px solid orange !important } 두번째, 모든 노드에 background 을 적용해서 레이아웃에 오류가 있는지 확인해 봅니다. * { background: rgb(0 0 .. 2022. 7. 17. [CSS3] 마우스 오버하면 이미지를 확대하는 방법(feat. transition) 안녕하세요. 혀코입니다. 네이버 메인화면을 보면, 이미지에 마우스 오버하면 이미지가 확대되는 효과를 볼 수 있습니다. 그래서 이번 시간에는 마우스 오버하면 이미지를 확대하는 방법에 대해서 알아보겠습니다. 이미지를 확대하려면 CSS의 transition과 transform 속성을 사용해야 합니다. html 구조는 이미지 노드를 감싸는 wrapper 노드로 구성되어 있습니다. wrapper 노드에는 가로값과 세로값을 지정해 주고 child 노드인 이미지가 wrapper의 사이즈 보다 커지는 부분은 안보이도록 overflow: hidden을 추가했습니다. 가로값과 세로값을 272px과 153px로 한 이유는 16:9 사이즈로 원본 이미지와 동일한 비율을 갖기 위해서 해당 값으로 지정했습니다. child 노드에.. 2022. 7. 16. [CSS] 일정 간격 띄어 자식노드 표시하는 방법(inset) 안녕하세요. 혀코입니다. 이번 시간에는 CSS의 inset 속성을 사용해서 부모노드로부터 일정 간격을 띄어서 자식노드를 표시하는 방법에 대해서 알아보겠습니다. inset property를 사용하면 해당노드가 가로값과 세로값이 없어도 부모 노드로부터 일정한 간격을 두고 위치하게 됩니다. 우선 예제 코드부터 보겠습니다. 우선 parent 노드를 웹사이트 가운데 위치하게 하기 위해서 html과 body에 height을 100% 주고, body의 display 속성을 flex로 지정하고 flex-direction과 align-items를 center로 지정했습니다. 이렇게 하면 parent 노드가 웹사이트 중앙에 위치하게 됩니다. parent 노드에 가로값과 세로값을 주고 확인하기 쉽게 배경색도 세팅했습니다. .. 2022. 7. 13. 이미지 파일이 없는 경우 대체 이미지 보여지도록 설정하는 방법 안녕하세요. 혀코입니다. 웹사이트에 예전에 올린 이미지 파일이 삭제되는 경우, 이미지가 깨져서 웹사이트에 표시되는 경우가 종종 있습니다. 그래서 이번 시간에는 이미지 파일이 없는 경우에 대체 이미지를 보여지도록 설정하는 방법에 대해서 알아보겠습니다. 이미지 태그에 이미지 파일이 없는 경우의 소스코드입니다. 프리뷰를 보면 다음과 같이 이미지가 깨져서 표시가 되는 것을 확인할 수 있습니다. 여기서 대체 이미지를 사용하려면 onerror attribute를 사용해서 대체 이미지를 대신 표시할 수 있습니다. 이미지가 깨진 경우, onerror 가 실행되며, onerror의 javascript 내용을 보면, 이미지 소스를 디폴트 이미지인 fallback.png로 변경하고 이 이미지의 alt attribute의 값.. 2022. 7. 6. 웹사이트 엘레먼트를 CSS 사용해서 가운데 정렬하는 5가지 방법 안녕하세요. 혀코입니다. 이번 시간에는 웹사이트 엘레먼트를 CSS 사용해서 가운데 정렬하는 방법 5가지에 대해서 알아보겠습니다. 1. CSS position을 사용해서 중앙정렬 하는 방법 .parent { width: 500px; height: 500px; position: relative; background-color: grey; } .child { width: 50px; height: 50px; top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); background-color: orange; } 부모 엘레먼트에 position: relative 값을 줘서 자식 엘레먼트에서 absolute 값을 줬을시 초기값을 부모 엘.. 2022. 6. 28. 웹브라우저 탭에 아이콘(파비콘 Favicon) 추가하는 방법 안녕하세요. 혀코입니다. 오늘은 웹브라우저 탭에 아이콘 일명 파비콘 Favicon 을 추가하는 방법에 대해서 알아보겠습니다. 파비콘 favicon으로 쓸 png 이미지를 준비해서 img 폴더에 넣습니다. favicon 이미지는 정사각형이 가장 좋습니다. 그리고 HTML의 head 태그안에 다음과 같이 작성해 주면 웹브라우저 탭에서 아이콘이 보여지는 것을 확인할 수 있습니다. Hello World Welcome to Hyukho's website 이렇게 웹브라우저 탭에 아이콘 일명 파비콘 Favicon을 추가하는 방법에 대해서 알아봤습니다. 유용하셨다면, 공감과 구독 부탁 드립니다. 감사합니다. 2020. 1. 15. 기본 메인화면 레이아웃 정리하는 방법(flex, flex-grow) 안녕하세요. 혀코입니다. 오늘은 기본 메인화면의 레이아웃을 flex의 flex-grow를 사용해서 정리하는 방법을 알아보겠습니다. HTML 파일을 다음과 같이 작성합니다. body 안에 main-content와 footer 이렇게 두개로 나누었습니다. Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pre.. 2020. 1. 15. [CSS] Background Gradient 배경 그라디언트 설정하는 방법 이번에는 배경에 한가지 색상이 아닌 두개의 색상을 사용하여 그래디언트 효과를 나타내는 방법에 대해서 알아보겠습니다.background: linear-gradient();그래디언트를 적용하고자 하는 색상 두개의 값(파란색 #0000FF, 녹색 #008000)을 넣어보겠습니다. /* CSS */ background: linear-gradient(#0000FF,#008000); 기본 설정으로 위에서 아래로 그래디언트가 적용된 것을 확인할 수 있습니다. 왼쪽에서 오른쪽으로 그래디언트를 적용하려면 다음과 같이 코드를 넣으면 됩니다. /* CSS */ background: linear-gradient(to right, #0000FF,#008000); 이와 반대로 녹색을 왼쪽으로 파란색을 왼쪽으로 하려면 to rig.. 2018. 7. 30. [CSS] Background 배경색상 지정하는 방법 + 투명도 지정 오늘은 CSS Background 속성에 대해 알아보도록 하겠습니다.Background 속성은 배경을 지정하는 데 사용됩니다.우선, 배경색상을 지정하는 방법에 대해 알아보겠습니다. background-color배경 색상을 지정하는 방법에는 크게 3가지가 있습니다. 1. 미리 정해진 색상명을 이용해서 지정하는 방법 (Black, White, Blue, Green ...)2. 16진수 6자리 색상코드를 이용해서 지정하는 방법 (#000000, #FFFFFF, #FF0000, ...)3. 0부터 255 이하 숫자를 이용한 RGB 색상코드를 이용해서 지정하는 방법 배경에 미리 정해진 색상명을 이용해서 지정하는 방법입니다. /* CSS */ background-color: red; 미리 정해진 색상명은 아래 웹사.. 2018. 7. 30. CSS란 무엇인가? CSS란 무엇인가? cascading style sheets 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다. HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다. 따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을.. 2009. 4. 18. 이전 1 다음
