본문 바로가기

HTML,CSS5

[비전공자의 개발공부] HTML 꿀팁_귀찮은데 코드 자동 완성 없나? 복잡한 코드 초보자도 빠르게 하는 '코드스니펫' VSC에 적용하기 코드스니펫이란? 재사용 가능한 소스 코드, 기계어, 텍스트의 작은 부분을 일컫는 프로그래밍 용어로, 주로 많이 사용하는 코드를 단축키처럼 사용할 수있게 해준다. 그래서 구조적으로 있어야하지만 보여지기엔 안이뻐서 숨기고 싶은 것이 있을때, CSS 이것저것 써야하는데 이걸 하나의 기능으로 해서 코드스펫에 등록하면 쓸때마다 편하고, 코드 속도고 올라가구 좋은 팁이다! .a11y-hidden { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); width: 1px; height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } 코드스니펫을 적용하기 위해선 json파일에다가 해야하는데 아.. 2023. 3. 14.

[비전공자의 개발공부] HTML 기초_CSS 선택자(selector) 연습-접시 선택하기 게임(CSS Diner), 이거 도대체 어떻게 하는거야? CSS 선택자에 익숙해지기 위한 재밌는 게임이 있다. 게임의 문제는 총 32개의 문제가 있는데 나는 ... 13에서 막힘....ㅠㅠㅠㅠㅠ 누가좀 도와줘여... https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 링크에 들어가면 움직이는 물체를 선택자로 선택해야하는데, 1. 노란 박스에 움직이는 물체에 마우스를 올리면 초록박스에 해당되는 이름이 하얀색으로 활성화 됨. 2. 빨간 박스안에 plate라는 태그를 써주면됨 만약 잘 모르겠으면 아래의 영상에서 1분만에 설명해준다 ㅋㅋ 굳굳 https://www.youtube.com/shorts/DNCYLyRcY5Q 2023. 3. 8.

[비전공자의 개발공부] HTML 기초_폰트 사이즈는 어떻게 해야할까? CSS 단위 CSS 단위에는 절대(고정) 단위와 상대 단위가 있다. 단위 절대 길이 단위 : px (cm, mm, in, pc, pt ….) 상대 길이 단위 : %, vw, vh, vmin, vmax, em, rem 절대 단위는 고정값으로 화면의 사이즈가 크던 작던 고정되며, 상대 단위는 부모요소, 화면 크기 따라 변동되므로 유지보수나 반응형으로 만들때 유리하다. 글씨크기로 인한 수정이 빈번하여 하나하나 설정하기 보다는 부모요소만 변경하여 나머지 다 그 비율에 맞춰서 조정되는 rem이 유지보수에 용이하다. 구분 단위 내용 절대 px Pixel(Picture + Element) 디바이스 화면에서 이미지를 표현하는 가장 작은 단위입니다. 상대 % 부모 요소를 기준으로 하는 백분율 단위입니다. * 부모요소 지정안할시엔 브.. 2023. 3. 8.

[비전공자의 개발공부] HTML 기초_ CSS 적용이 왜 안되지? CSS선택자 우선순위 CSS에 분명 코드값 썼는데 왜 안되지??? CSS하다가 언어에 충돌이 생기면 몇가지 규칙에 의해 점수가 높은 코드가 적용이 된다. 후자 우선의 원칙 뒤에 나오는 CSS가 우선순위가 높습니다 구체성(명시도)의 원칙 중요성의 원칙(!important) 1. 후자우선의 원칙 제일 먼저 red로 했지만 제일 마지막 blue이기 때문에 blue가 적용됨 2. 구체성의 원칙 구체성을 갖을 수록 가중치를 줘서 점수가 높아짐 (1) inline스타일 : 태그 안에다가 바로 스타일 적용시 in line속성 아래와 같이 style 에 컬러들을 red, blue 넣었지만 태그안에서 지정한 pink로 색상이 나옴 (2) ID 선택자 # ID는 페이지 파일 하나에서 유일해야하는 것으로 구체성이 높다. (3) 타입 < clas.. 2023. 3. 8.

[비전공자의 개발공부] HTML 꾸미기 기초_CSS 선택자(selector) CSS란? CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 디자인과 레이아웃을 정의하기 위해 사용되는 스타일 시트 언어입니다. 선택자(selector)는 HTML에 hello와 Hi을 각각 , 태그를 감싸서 치면 아래와 같이 나오는데, HTML에 있는 요소들을 이쁘게 꾸미기위해선 CSS에 선택자를 먼저 적어줘야한다. 예시로 hello을 선택해서 걔한테 color는 pink로 줄거야라고 컴퓨터에게 얘를 꾸며줘라고 지정하는 것이다. 안에 태그를 만들어서 거기에 CSS를 바로 써도되고, CSS파일을 따로 만들어서 HTML에 연결해도된다. 나는 간단한 코드이기 때문에 안에다가 만들어 아래와같이 컬러를 핑크로 지정해줬다. 선택하는 방법은 다양하한데, 위에 선택한 방법은 타입 선택자이다. .. 2023. 3. 8.

이전 1 다음

티스토리툴바