본문 바로가기
반응형

전체 글167

📌 CSS의 기본적인 주요 선택자! CSS 선택자는 스타일을 적용시킬 대상을 선택한다. 선택자는 섞어서 이용할 수 있다. 전체 선택자 : * * { margin : 0 0 0 0; padding : 0 0 0 0; } 문서의 여백이나 글꼴 크기 등 기본 스타일링을 초기화 할 때 🐍 주로 바깥 여백 마진(margin), 안쪽 여백 패딩(padding) 초기화시 사용 태그 선택자 : 태그명 h1 { font-weight: 300; font-size: 2.125em; color: #fff; } 특정 태그에만 적용시킴 class 선택자 : .class명 .class-name { font-weight: 300; font-size: 2.125em; color: #fff; } html 태그에서 방식으로 속성으로 설정 이 후 CSS에서 .클래스-이름 으.. 2022. 9. 21.
🎨 CSS 적용 방법 3가지! CSS 적용 방법 3가지 : 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 시트 스타일 적용 순서 : 인라인 > 내부 > 외부 내부 스타일 시트 ... head 안 style 태그 안에 담김 외부 스타일 시트 외부에 css 파일을 만들어두고 불러옴 불러올 때는 head 안 link 태그를 이용함 가장 많이 사용하는 방식 인라인 스타일 시트 내가 보려고 정리하는 프로그래밍 간단한 스타일을 적용시킬 때 사용 문서가 복잡해지기 때문에 권장하지는 않는다. 🐍 테일윈드(Tailwind) 이용 방식 테일윈드 이용하기! 엄밀히 말해서는 Tailwind라는 외부 스타일 시트를 불러온 후 적용하는 방식 각 스타일 설정마다 클래스가 정해져 있어, 클래스 명으로 적용할 스타일을 입력하면 인라인 스타일처럼 이용 가능하다. 2022. 9. 21.
🎨 CSS 기본 개념, 문법 구조 초간단 요약! CSS란? 약어 설명 Cascading Style Sheet의 약자 Cascading : 폭포처럼 떨어져 내리는 특성(상속)을 지닌 Style Sheet : 스타일 관련 데이터가 나열된, 열거된 공간 사용 CSS는 색상이나 크기, 위치, 배열 방법등 디자인 요소를 담당 크게 문서의 레이아웃과 스타일 정의 js와 연계해 동적인 컨텐츠 표현이나 디자인 적용 가능 버전 CSS 1.0부터 CSS 4.0까지(현재) 버전 큰 의미 없다. 자동으로 브라우저에 최신 버전으로 제공 🐍 그러니 어떤 스타일 표준이 만들어지고, 그걸로 뭘 할 수 있는지만 알기, 브라우저 호환성 확인 CSS 기본 문법 CSS 구문은 선택자(Selector)와 선언부(Declaration)으로 구분 선택자 : 디자인을 적용할 HTML 요소를 선.. 2022. 9. 21.
🖼️ 이미지와 링크를 다는 HTML 태그들! ⭐ HTML에서 이미지 달기 img 태그 기본 img 태그를 이용하여 이미지를 단다 src 속성에 이미지 경로를 입력한다. 서버에서 불러오거나 아님 웹에서 불러오거나? alt 속성으로 대체 텍스트를 입력해준다. 구글 SEO나 웹 접근성을 위해 필요하다. - 이미지에 설명 붙이기 설명 표에서 하던 것과 똑같다! figure 태그로 감싼 후 figcaption 태그 안에 설명을 적는다. ⭐ HTML에서 링크 달기 a 태그 기본 텍스트 a 태그로 링크나 이미지를 감싸 링크로 만든다. href는 hypertext reference의 약자, 링크할 주소를 넣는다. 속성의 종류 속성 이름 뜻 href 링크한 문서나 사이트의 주소를 입력한다 target 링크한 내용이 표시될 위치(현재 창 또는 새 창)을 지정한다 d.. 2022. 9. 20.
📝 표를 만드는 HTML 태그들! 표를 만드는 태그 의 기본 구조 📥입력 열제목1 열제목2 열제목3 행제목1 내용 내용 행제목2 내용 내용 정리 정리1 정리2 📤출력 열제목1 열제목2 열제목3 행제목1 내용 내용 행제목2 내용 내용 정리 정리1 정리2 는 , , 으로 구성되어 있다. 그리고 로 행(row)마다 묶어져 있으며, 안에는 제목(head)인 , 내용(data)인 가 들어갈 수 있다. HTML 표에 추가할 수 있는 속성 colspan, rowspan : 행 합치기, 열 합치기 📥입력 합친 행 //rowspan="합치고 싶은 셀 갯수" 내용 내용 내용 내용 내용 합친 열 //colspan="합치고 싶은 셀 갯수" 📤출력 합친 행 내용 내용 내용 내용 내용 합친 열 rowspan rowspan은 각 행에서 같은 위치에 있는 셀끼리 합.. 2022. 9. 20.
Javascript에서 문자열을 숫자만큼 반복하는 방법! 파이썬에서는 그냥 문자열에 숫자를 곱하면 반복되지만, 자바스크립트에서는 그렇지 않습니다. 자바스크립트에서 특정 횟수만큼 문자열을 반복하는 방법에 대해 알아봅시다! 방법1 : repeat() "문자열".repeat(); 문자열의 reapeat() 메소드를 이용, 숫자를 넣어주면 해당 숫자만큼 문자열이 반복됩니다! 방법2: join() Array(11).join("문자열") 우선 Array()로 빈 배열을 하나 만들어둡니다. 그리고 join() 메서드를 이용, 배열의 빈 원소 사이에 a를 넣어 문자열로 만들어주는 방식입니다! 주의하실 점은 반복하고자 하는 횟수보다 하나 더 크게 배열을 만들어주셔야 한다는 점입니다! 2022. 9. 19.
반응형

티스토리툴바