본문 바로가기
728x90

HTML

 (8)
[CSS]text-transform이란, css 를 공부하다 보니 새로운 것들을 사용하게 되네요. 이번에는 text-transform 이란 요소에 대해 배워봅니다. text-transform이란 영문자의 대문자, 소문자 표시를 설정하는 요소입니다. 1. capitalize 각 단어의 앞글자만 대문자로 변환 2. uppercase 전부 대문자로 변환됩 3. lowercase 전부 소문자로 변환
[CSS]vw, vh, vmin, vmax의 사용방법 css를 사용하다보면 단위로 px, % 를, 폰트 기준으로는 em, rem을 주로 사용하곤 하는데 반응형 디자인이 보편화 되면서 vw, vh, vmin, vmax의 사용이 늘어나게 되었습니다. 이번에는 이 단위들에 대해서 알아보겠습니다. vw, vh란 vw, vh는 뷰포트 크기를 기준으로 하는 단위입니다. 뷰포트 란, 표시 중인 브라우저 창의 너비를 의미합니다. 컴퓨터나 스마트폰 화면의 크기가 아니라 웹 사이트를 렌더링하는 브라우저 창의 크기입니다. 위의 사진처럼 뷰포트의 가로 비율을 기반으로 하는 단위가 vw 뷰포트의 세로 비율을 기반으로 하는 단위가 vh 입니다 실제예시 // html 100vw 100vh 10vw 10vh // css body { position: relative; font-size..
CSS에서 변수 사용하기 Sass없이도 변수를 사용할 수 있다는 것을 알게 되어 그 방법에 대해서 적어봅니다. 변수 정의 간단합니다. 하이픈(-) 두개를 적어주고 그 옆에는 변수명(white): 할당하고싶은값(#fff)을 적어주면 됩니다. :root { --white: #fff } 여기서 :root라는 것은 전역 변수입니다. 전역변수란 선언함으로써 모든 곳에서 사용할 수 있는 변수를 의미합니다. 변수로 색상 말고도 다른 값들도 지정할 수 있습니다. :root { --main-color: #2980b9; --red: red; --light-color: #777; --light-bg: #eee; --black: #2c3e50; --white: #fff; --box-shadow: 0 0.5rem 1rem reba(0,0,0,0.1);..
클릭했을 때 전화 걸기 html/css 이번에 현장에서 배운 재밌는 코드 보통 스마트폰에서 전화번호가 적혀있는 부분을 터치하면 전화 걸기 기능을 실행해주는 기능을 배웠다. 뭔가 엄청 어려울 것 같았는데 별거 없었다 ㅎㅎ 000-1234-5678 a태그 안에 href속성이 있는데 여기에 tel: 번호를 입력해주면 된다. 만약 해외사이트의 경우 앞에 +국제번호(한국의 경우: 82)를 입력해주면 된다. 밑에와 같이 000-1234-5678 끝 플러스) 혹시 css브레이크 포인트에서 지정한 크기에서만 실행하고 싶다면 @media(min-width: 770px){ a[href^="tel:"]{ pointer-events: none; } } 디바이스의 폭이 770px미만에서는 전화 발신이 가능한데 770이상의 디바이스에서는 전화발신기능이 불가능하게된다...
CSS 네이밍 예시 ・ 팁 작업하다 보면 css클래스를 지정할 때 너무 생각이 아나 어떻게 지어야 할 때가 많다. 그래서 이번에는 css클래스명의 예시를 보여드리려 한다. 참고가 되시길, (보통 많은 현장에서 BEM형식을 채택하고 있어서, BEM에 대해서 어렴풋이 알고 있기 때문에 차차 공부해 나가면서 블로그에도 소개하겠다) 팁) 이런 식으로 있다고 생각했을 때 나는 보통 가장 바깥 div태그에는 안의 태그들을 아우르는 클래스명을 선언하고 두 번째 태그부터는 BEM의 영향인지 바깥태그의 클래스명(1) + 언더바(__)를 붙이고 그다음으로 이 태그가 의미하는 클래스명을 지정한다. '1__2' 이런식으로 3 클래스는 결국 '1__2-3' 이런 식이 될 것이다. 맨 밑의 클래스 2는 위의 2와 다르게 ' 1__2・ ' 이런 식으로 다른..
HTML요소 HTML요소 요소는 여는 태그, 컨텐츠, 닫는태그로 구성된다. 사진을 보면 여는태그 Hello World 컨텐츠부분 닫는태그 HTML요소의 중첩 HTML요소는 중첩될 수 있다. 즉, 한 요소가 다른 요소를 포함할 수 있다는 뜻이다. 모든 HTML문서는 중첩된 요소로 구성되어있다. 사진을 보면 태그 안에 태그와 태그가 중첩되어 있는 것을 볼 수 있다. 닫는 태그를 적어주지 않으면 예상치 못한 결과나 에러를 발생시킬 수 있기 때문에 조심해야한다. 빈 HTML요소 컨텐츠를 포함하지 않은 HTML요소를 빈요소(empty elements)라고 부른다. * HTML표준은 소문자 태그를 필요로 하지 않지만, W3C는 HTML에서 소문자 태그사용을 권장하고 있다. 또 XHTML과 같은 엄격한 문서타입의 경우에는 소문자..
HTML 기본 예 HTML Documents 모든 HTML 문서는 로 시작해야한다. HTML문서는 에서 시작하고, 로 끝난다. HTML문서의 눈에 보이는 부분은 와 에 위치한다. 선언 이 선언은 문서의 종류(type)를 나타내고, 브라우저가 웹페이지를 올바르게 나타내도록 돕는 역할을 한다. 어떤 HTML태그보다 위에 와야한다. 보통 HTML5에서는 이라고 선언한다. HTML 제목태그 에서 까지 정의된다. 태그가 가장 중요한 제목, 가장 덜 중요한 제목 HTML문단태그 로 정의되고 paragraphs(문단)의 약자이다. 하나의 문단을 만들 때 사용한다. HTML링크 태그를 사용한다. 태그에는 href라는 속성(attribute)을 가지고 있는데 이 속성은 HTML요소에 관해 추가적인 정보를 제공할 때 사용된다. 나중에 자세..
HTML(Hyper Text Markup Language)이란 HTML _? 웹 페이지를 제작하기 위한 표준 마크업 언어(the standard markup language)이다. 웹페이지의 구조(structure)를 정의한다. HTML은 요소(a series of elements)로 이루어져있는데, 이 요소들은 브라우저에게 컨텐츠를 어떻게 보여줄 것인가를 나타낸다. 간단한 HTML 예 이 문서가 HTML5문서라는 것이라고 선언하는 것이다.
728x90

티스토리툴바