'coding/html + css' 카테고리의 글 목록 (20 Page)

[html] <span>

안녕하세요. 플입니다. 오늘은 태그에 대해 알아보겠습니다. 1. 태그 span은 '기간, 폭'을 뜻하는 영어단어입니다. 태그로서 가지는 의미는 가상의 폭. 즉, 가상의 공간을 가지게 됩니다. 사실 영어 의미는 이해 못하셔도 괜찮습니다. '아 태그는 공간'정도만 알고 계시면 됩니다. 태그는 와 같이 공간을 지정해주는 태그입니다. 와 다른 점은 inline요소라는 점입니다. 2. 태그의 활용 스팬 태그는 보통 큰 의미가 있는 곳에 사용하는 태그는 아니고 디자인적으로 구분이 필요할 때 주로 사용합니다. 예를 들어 의미가 있는 태그는 태그나 태그 등이 있습니다. 태그는 링크를 태그는 이미지를 의미하죠. 표시된 부분은 태그로 할 예정입니다. 그런데 문제가 있습니다. 아시겠나요? 배경에도 색이 들어가고, 텍스트 부..

coding/html + css · 2019. 9. 24. 07:30

[html] <img>태그 alt 속성

안녕하세요. 플입니다. 오늘은 alt속성을 알아보겠습니다. 1. 태그 태그의 구성은 위와 같이 서술됩니다. 이미지 주소를 불러와 화면에 이미지를 띄워줍니다. 이미지를 불러온 화면 예시입니다. 2. alt 속성 alt는 대체하다는 뜻의 영어단어 'Altemate'의 줄임말입니다. 이미지를 불러오지 못했을 때 이미지 설명을 대체로 불러옵니다. 이렇게 이미지를 불러오지 못하면 alt속성에 적힌 글이 대신 나타납니다. 아래의 코드가 실제 코드입니다. alt에 해당하는 visual이 글로 나온 걸 알 수 있습니다. 3. 웹 접근성 alt의 사용 목적은 웹 접근성과 큰 관련이 있습니다. 웹 접근성이란 모든 사용자가 웹에 쉽게 접근하도록 만드는 것을 의미합니다. 특히 장애인이나 나이가 많아 인터넷을 하기 어려운 사람..

coding/html + css · 2019. 9. 18. 07:30

[css] hover로 색 바꾸기

안녕하세요. 플입니다. 오늘은 hover를 이용해 마우스 오버 시 색을 변경해보겠습니다. ▷hover hover는 '맴돌다'라는 뜻을 가진 영어단어입니다. 마우스가 위에서 맴돌고 있을 때라고 이해할 수 있습니다. 저는 마우스 오버 시 적용되는 css로 생각하고 작업합니다. ▷사용 이유 hover를 사용하는 건 사용자의 편의를 위해 들어가는 효과입니다. 마우스를 올렸을 때 어떤 효과가 적용되거나 마우스의 모양이 손가락 모양이 되면 사용자들은 '클릭을 하는 부분'이라는 것을 직감적으로 알게 됩니다. 오늘 예시로 사용할 메뉴 색상을 변경하는 것을 살펴보면 마우스를 올렸을 때 색상이 변경되면 사용자는 클릭하는 부분이라는 것을 쉽게 알 수 있습니다. 이처럼 사용자의 클릭을 유도해 조금 더 쉽게 홈페이지를 이용할 ..

coding/html + css · 2019. 9. 6. 07:30

[html] nav태그

안녕하세요. 플입니다. 오늘은 nav태그를 이용해 메뉴를 만들어봤습니다. https://youtu.be/4kNNcnqQ42g 오늘은 영상으로 대체하겠습니다. 코딩 화면을 한번 찍어봤습니다. About Portfolio Contact 전체 코드를 남겨둡니다. 태그는 메뉴를 감쌀 때 주로 사용하는 태그입니다. 보통 태그 안에 gnb메뉴를 넣습니다. 그럼 이만. 총총.

coding/html + css · 2019. 8. 28. 07:30

[css] border-style 종류

안녕하세요. 플입니다. 오늘은 border-style 종류를 알아보겠습니다. border 보더는 테두리를 말합니다. css에서 border 값을 설정하면 테두리 디자인을 할 수 있습니다. 오늘은 그중 style에만 중점을 두고 살펴보겠습니다. 1. dotted 도티드는 점선이라고 생각하시면 됩니다. 테두리가 점선으로 처리됩니다. p{ border-style: dotted; } 2. dashed 대쉬드는 짧은 선이 연속으로 나옵니다. 점선과 비슷하지만 점보다는 조금 긴 모양이죠. p{ border-style: dashed; } 3. solid 솔리드는 가장 많이 사용하는 형태로 선 타입입니다. p{ border-style: solid; } 3. double 더블은 두줄이 나옵니다. 주의할 점은 두줄이기 때..

coding/html + css · 2019. 8. 7. 07:30

coding/html + css 100