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

[sass/scss] 자동 컴파일하기

오늘은 scss 사용 시 컴파일하는 법을 알아보겠습니다. 1. 실행창 열기 먼저 실행창을 열어줍니다. 시작에서 실행을 검색해 여는 방법과 window + R 단축키를 눌러 여는 방법이 있습니다. *window키는 ctrl과 alt 사이에 있는 키 2. 명령 프롬프트(cmd) 열기 위의 이미지에서 이미 쓰여있었지만 실행창을 열었다면 cmd를 입력해 명령 프롬프트를 실행합니다. 실행하면 이런 명령 프롬프트가 열립니다. 3. 파일 경로 바꾸기 기본은 C로 경로가 잡혀있습니다. 우선 scss작업을 할 폴더로 경로를 옮겨줍니다. 저는 D폴더에 있어 일단 d로 경로를 이동했습니다. d로 경로를 이동할 땐 d:이라고 입력합니다. 엔터를 누르면 이렇게 D드라이브로 이동됩니다. 다음은 cd명령어를 이용해 scss를 실행..

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

[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

coding/html + css 101