# htmlcss

481개의 포스트
post-thumbnail

html에서 파일 올리기

html에서 파일을 선택하거나 드래그해 파일을 올리는 방

2023년 1월 27일
·
0개의 댓글
·

HTML/CSS 실습 _ vscode 단축키

현재 창 닫기 : ctrl + w 닫은 창 다시 열기 : ctrl : shift + t 사이드바 탐색기 : ctrl : shift + e 사이드바 전체 검색 : ctrl : shift + f 들여쓰기 : Tap 혹은 ctrl + ] 내어쓰기 : Tap 혹은 ctrl + [ 아래 행 삽입 : ctrl + enter 위에 행 삽입 : ctrl + shi...

2023년 1월 25일
·
0개의 댓글
·

HTML/CSS 실습 _ SASS

* Sass (SCSS) : CSS의 확장 언어 css보다 조금 더 높은 자유도를 개발자들에게 부여 브라우저 : html, js , css * 색 관련 함수 darken : 어둡게 background-color: darken($color, 20%); lighten : 밝게 background-color: lighten($color, 20%); satura...

2023년 1월 25일
·
0개의 댓글
·

HTML/CSS 실습 _ CSS 가상클래스와 선택자

* CSS 가상클래스 : - 가상클래스 :: - 가상요소 * Anchor 태그 a : link 링크를 클릭하지 않은 상태 a : visited : 클릭을 한번이라도 한 상태 * CSS 선택자 position - 태그의 위치를 임의대로 지정 position : absolute - 부모 태그가 기준이 됨 position : fixed - 브라우저가 기준이...

2023년 1월 12일
·
0개의 댓글
·

HTML/CSS 실습 _ head 태그의 구성 요소

* head 태그를 구성하는 요소들 css 파일들 style 태그 title 태그 (웹 페이지의 제목을 만들어줌) meta 태그 (웹 페이지에 대한 정보, 사용자의 눈에 보이지 않음) favicon : ico 파일 -> favicon generator 사이트에서 favicon 파일 생성 가능

2023년 1월 12일
·
0개의 댓글
·

HTML/CSS 실습 _ 정보 제출할 땐 form 태그

* form 태그 사용자가 정보를 입력하고 그 정보를 받을 때 사용하는 태그 사용자와 웹사이트가 소통할 수 있도록 만들어줌 name : 이름 type : 텍스트 표시 방식 (text, password, email, submit) placeholder : 고정 표시되는 텍스트 * select 태그 사용자가 선택지로 선택하게 하는 것 name : 이름 v...

2023년 1월 12일
·
0개의 댓글
·

HTML/CSS 실습 _ margin, padding

* 레이아웃을 구성할 때 반드시 사용해야할 CSS 속성들 - margin, padding margin - border : 바깥쪽 여백 padding - border : 안쪽 여백 top right left bottom 순으로 부여 가능 * margin 겹침, margin collapsing 현상 margin끼리 각각 공간을 차지하는 게 아니라 겹쳐져서 ...

2023년 1월 11일
·
0개의 댓글
·

HTML/CSS 실습 _ html 기본 태그 3

* 폰트 사이즈단위 일반적으로 16px = 1em = 1rem * flexbox : inline, float보다 쉽고 간결하게 레이아웃 배치 align-content : 두 줄 이상일 때만 효력이 있다 여러 줄의 아이템들의 수직 정렬 align-items : 한 줄의 아이템들의 수직 정렬 * grid : 레이아웃 배치 중 제일 최신의 방법 공간을 격자...

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

html/css 만들고 싶은 페이지 구현

pigma로 마크업 한 페이지내가 구현한 페이지htmlcss참고 사이트css flex : https://studiomeal.com/archives/197hr 태그로 선 긋기 : https://hianna.tistory.com/701

2023년 1월 8일
·
0개의 댓글
·

HTML/CSS 실습 _ html 기본 태그 2

* 이미지 태그 넣어보기 크기 조정하기 비디오 태그 * div 태그 : division 가상의 경계, 가상의 레이아웃 * Span 태그 : 디자인을 입혀주고 싶은 테스트를 감싸주는 역할 * Semantic Elements in HTML header : 웹사이트의 제일 머리 부분, 검색창, 로고 nav : 네비게이션 바, 웹사이트 주요 페이지로 이동...

2023년 1월 7일
·
0개의 댓글
·

HTML/CSS 실습 _ html 기본 태그

p 태그 : 문단 표현 h 태그 : 제목 표현 (1~6까지 할당) * Semantic 태그 u : 고유명사, 철자가 틀렸을 때 s : 문서의 내용이 틀렸을 때 deL : 예전 버전에는 있었는데 최신 버전에는 삭제된 내용 * 목록 만드는 태그 oL : 순서 목록 (Li 태그 시 숫자로 순서 자동 부여) uL : 순서가 없는 목록 (Li 태그 시 점으로 표...

2023년 1월 7일
·
0개의 댓글
·

HTML/CSS 실습 _ html 기본 구조

HTML : 웹페이지의 내용 CSS : 웹페이지의 디자인 * html의 기본 구조 html : HyperText Markup Language 사용자(유저), 브라우저(크롬, 웨일 등)가 웹페이지에 접속할 때 개발자가 사용자에게 보여주고 싶은 컨텐츠를 브라우저가 읽을 수 있도록 만들어놓은 문서 head : body 태그를 읽기 전에 알아야 할 정보 이 파일...

2023년 1월 7일
·
0개의 댓글
·

HTML/CSS 실습 _ vscode 프로그램 설치와 확장 설치

* 확장 설치 - 왼쪽 하단 블럭모양 아이콘 클릭 1. Live Server - 설치 후 파일 생성 후 "!"입력 - 빠르게 html 파일 만들 수 있음 Open with Live Server - 브라우저를 통해 코딩한 내용 실시간 확인 2. CSS Peek - html 파일에 CSS를 입히게 되었을 때 간편하게 관리해주는 확장 (CSS배울 때 본격적 ...

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

'웹 퍼블리싱' 1.HTML/CSS 시작하기

*2021. 7. 14. 23:39 에 작성한 글

2023년 1월 7일
·
0개의 댓글
·

CSS 첫 걸음

Cascading Style Sheets웹 페이지의 디자인 담당태그 안에 속성 부여세미콜론(;)이 속성 종결을 나타냄반드시 속성과 속성에 해당하는 값을 적으면 그 속성의 종결의 의미로 세미콜론 추가 head tag 안에 작성Inline 형식으로 작성할 경우 바디 태그

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

2022-12-30[HTML+CSS-10]

max, min

2022년 12월 30일
·
0개의 댓글
·

2022-12-29[HTML+CSS-10]

임시

2022년 12월 29일
·
0개의 댓글
·

[WIL] 웹개발 종합반 1주차

2022.12.27 웹개발 종합반 1주차 강의를 완료했다. 그동안 간단하게 배워왔던 HTML, CSS, 간단하게 JS를 배울 수 있었다. 스파르타코딩클럽에서 제공한 강의자료를 이용해 강의를 통해서 기존에 알고 있던 내용이 아닌 새롭게 알게 된 내용을 정리하려고 한다

2022년 12월 27일
·
0개의 댓글
·
post-thumbnail

🏁 계산기 만들기(2/3)

계산기 리뉴얼 버전 overflow-y:auto 랑 wrap-reverse 로 스크롤 하단에 고정하는 방법, ::after, position: absolute 사용하기

2022년 12월 26일
·
0개의 댓글
·
post-thumbnail

🏁 계산기 만들기(1/3)

HTML 과 CSS로 계산기 와이어프레임을 짜는데 예시에 나와있는건 row 형태로 그룹이 지어져있었는데(ex. AC, <-, , 7, 8, 9, + , 4, 5, 6 -, ...)페어분이랑 나는 뭔가 성격에 맞게 그룹을 짓고

2022년 12월 24일
·
0개의 댓글
·