profile
공부 기록장
post-thumbnail

[HTML/CSS] 데이터를 저장해 사용하는 attr, css변수

같은 조건의 요소에 색 혹은 백그라운드만 변경하고 싶을 때, 선택자를 이용해 따로 클래스를 지정하거나 혹은 nth-child로 지정하곤 한다. 그런데 지정하는 수가 두 세개 쯤이라면 상관이 없겠다만 그 이상이라면? 게다가 수정을 해야하는 상황이라면..? 이럴 때 필요한 것이 사용자 정의 속성! 선택자로 따로 지정하지 않아도 저장한 값을 불러오기만 하면 된다. 1. HTML 데이터 속성 attr HTML 태그는 태그의 선언과 속성들로 구성된다. 이 때 태그의 속성(attribute)이라는 것은 현대 태그에 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)이다. [- 출처](https://velog.io/@gga01075/HTML%ED%83%9C%EA%B7%B

2023년 5월 5일
·
0개의 댓글
·
post-thumbnail

[HTML] 기능 연결 고리 input, label, a

폼과 탭메뉴를 구현하다가 input과 a태그를 활용하면 기능의 뼈대도 구축할 수 있는 거구나..! 하고 매력을 느꼈다. 응용에 따라 다양하게 활용할 수 있는 코딩 세계 〰️〰️ 앞으로 착착 잘 활용하고 싶어서 개념부터 정리해본다. 기능 연결고리 input-label 그리고 anchor 레쓰기릿! 1. form - input `` 은 사용자로부터 정보를 받아 서버에 전송하는 태그이다. 안에는 한개 이상의 element( input, label, button, textarea )가 포함될 수 있다. 자주쓰는 요소는 이런 것들이 있다. |input type=""|설명|예시| |:--------:|--------|:--------:| |text|텍스트를 입력받는 가장 기본적인 input형태|| |password|패스워드를 입력받는 input형태|<input type="password

2023년 4월 21일
·
0개의 댓글
·
post-thumbnail

[HTML/CSS] 네이밍에 대해 고민해보자

몇몇의 웹페이지 그리고 강의를 보며 코드를 분석하다가 클래스명에 의문이 생겼다. 어떤 페이지는 하이픈을 쓰고, 또 어떤 페이지는 언더바를 쓰고.. 사람마다 다 다른 스타일로 짜여져 있었기 때문이다. 네이밍에 기본적인 규칙은 없는지 단지 개인의 기호일 뿐인 건지 궁금해졌다. 이번 학습 목표는 어떤 식으로 네이밍을 짜야 효율적이고 가독성이 좋은 것인지 알아보고 나만의 CSS 컨벤션을 세워 일관성있는 코딩을 하게 되는 것..! Q1. Coding Convention 이란? 해당 언어로 작성된 프로그램의 각 측면에 대한 프로그래밍 스타일, 관행 및 방법을 권장하는 특정 프로그래밍 언어에 대한 일련의 지침이다. 즉, 나 외에 다른 사람들도 내가 작성한 코드를 보고 쉽고 빠르게 이해할 수 있도록 하나의 작성 표준을 정해둔 것. 코딩 컨벤션의 장점은 생산성과 가독성이 높아진다는 것이다. ex ) [에어비앤비](https://github.com/CodeMake

2023년 4월 4일
·
0개의 댓글
·
post-thumbnail

[HTML] 기초 정리

Hyper Text Markup Language 웹문서를 만드는 언어다. HyperText란 문서를 서로 연결해주는 링크를 의미, Markup은 '표시한다'의 의미로 웹브라우저에 내용을 보여주는 텍스트, 이미지, 영상 등의 위치를 표시하는 것을 말한다. 마크업 형싱으로 어느 부분이 제목, 텍스트 또는 표인지 구별할 수 있는 꼬리표인 '태그(Tag)'를 사용한다. 0. html 기본 구조 1. html의 기본태그들 -`` 글자를 진하게 -`` 글자에 밑줄 표시 -`` 줄바꿈 -`` 가로선 -~ 제목태그, 숫자가 1에 가까울 수록 크기가 커짐 -`

2023년 2월 21일
·
0개의 댓글
·