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

[html/css] 버튼만들기

안녕하세요. 플입니다. 오늘은 버튼 태그를 이용해 버튼을 만들어보겠습니다. 1. 버튼 만들기 더보기 일단 버튼 태그를 이용해 버튼을 만들어줍니다. 버튼 태그를 이용해 코드를 작성하면 자동적으로 이미지와 같은 디자인이 됩니다. 우선 이것을 리셋시켜서 일반 디자인으로 변경하고 시작합니다. button{ background:none; border:0; } 배경과 보더를 빼줍니다. 기본 css를 이렇게 설정하고 디자인을 하는 편이 편합니다. 적용하면 이런 모양입니다. 2. 태그 디자인 .btn{ @extend %width_auto; text-align:center; margin-top:24px; display:block; } 태그에서는 우선 위치를 잡아줍니다. %width_auto{ width:1280px; m..

coding/html + css · 2019. 10. 2. 07:30

[css] position을 이용해 반투명 배경 올리기

안녕하세요. 플입니다. 오늘은 position 활용법을 알아보겠습니다. position을 이용해 포토샵의 레이어처럼 층을 하나 올려 반투명한 배경을 만들어 볼 것입니다. 이런 식으로 이미지 위에 단색이지만 약간 투명도가 있어 밑의 이미지가 보이는 모습을 만들 것입니다. 1. 기본 재료 준비 기본적으로 html에서 이미지와 위에 올릴 요소 한 가지가 있어야 합니다. 제 코드는 이런 식으로 되어있습니다. 태그에 배경을 주어서 위로 올려줄 예정입니다. 2. position position:relative; 우선 relative를 이용해 레이어처럼 층을 만들어줍니다. relative란 '관련 있는'이라는 영어단어로 position값을 준 요소의 부모 태그와 관련이 있다고 생각하면 쉽습니다. 위치가 부모 태그의 ..

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

[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

coding/html + css 98