Flexbox와 Grid를 공부하고나서 네비바와 카드 레이아웃을 만드는걸 해보려고 함우선은 css파일을 불러와야 하니 다음으로는 상단바 부터 만들어 보겠음 MyPortfolio 홈 소개 포트폴리오 연락처 리스트 형식으로 생성을 했으니 이제 원하는 스타일로 스타일을 추가해보면?/* 네비게이션 부분 */.navbar { display: flex; justify-content: space-between; align-items: center; background-color: #333; padding: 15px 30px;}.logo { color: white; font-size: 24px; font-weig..

1. CSS 선택자HTML 요소 중 어떤 부분에 스타일을 적용할지 "찍어주는 역할" 기본 선택자 종류태그 선택자: 태그 이름으로 선택클래스 선택자: 여러 요소에 재사용 가능 (`.` 사용)아이디 선택자: 한 페이지에 1번만 사용 (`#` 사용)예제안녕p { color: blue; } /* 태그 선택자 */ .text { font-size: 20px; } /* 클래스 선택자 */ #title { font-weight: bold; } /* 아이디 선택자 */2. 텍스트 / 폰트 스타일글자의 크기, 색상, 굵기, 정렬 등을 설정하는 속성`color`: 글자 색`font-size`: 글자 크기`font-weight`: 글자 두께`text-align`: 정렬예제p { color: black; font-size..

지난번 HTML로 간단한 자기소개 페이지를 만들어 봤었음그걸 이제 CSS를 추가해서 꾸며보겠음이게 지난번 결과임 안녕하세요 이도서입니다. 자기소개 저는 React 개발자를 꿈꾸는 개발자입니다. 보유 기술 Swift Flutter HTML 학습중 JavaScript 학습중 React 학습중 연락처 Email : 이메일 비공개 프로필 사진 노션 링크 내 노션 링크 그럼 한번 해보겠음 우선 `link`로 css파일을 불러오도록함그 후 아래에 내용을 작성해보겠음 이도서 (Lee doseo) React ..

웹에서 회원가입, 로그인 같은 화면을 보면 대부분 입력창이 있음.이때 사용되는 태그가 바로 `form`과 `input`임.오늘은 이걸 다뤄보겠음form 태그란?`form`태그는 사용자가 입력한 데이터를 서버로 전송하기 위한 영역을 만드는 태그임 주 역할입력 데이터를 하나의 묶음으로 관리전송 방식 설정데이터를 보낼 서버 주소 지정기본 형태는 아래와 같음 `action` -> 데이터를 보낼 서버 주소`method` -> 전송 방식 (GET 또는 POST)`method`를 생략하면 기본값은 `GET` 방식으로 동작함이는 아래에서 더 다루겠음input 태그란?`input`태그는 실제로 사용자 입력을 받는 칸을 만드는 태그임.`type` 속성에 따라 입력 방식이 달라짐 자주 쓰는 `type` 종류`text` -..

오늘은 HTML의 기본이면서도 가장 많이 사용되는 div, span 태그와 class와 id속성에 대해 정리해볼 것임1. `div`와 `span`의 차이`div`와 `span`은 HTML에서 특별한 의미가 없는 '컨테이너'역할을 하는 태그임.다른 태그들과 달리 정해진 역할이나 필수 속성이 없고, 태그를 적용해도 다른 요소들의 모양이나 배치가 변경되지 않음.그래서 '비어있는 태그'라고도 부름 `div` -> 블록 태그한 줄 전체를 차지함자동으로 줄바꿈이 일어남레이아웃 구조를 나눌 때 주로 사용함`span` -> 인라인 태그필요한 만큼만 영역을 차지함줄바꿈 없이 같은 줄에 이어서 표시됨글자 일부에 스타일을 줄 때 자주 사용함정리하자면,`div`는 영역(박스)를 만드는 용도`span`은 글자 일부에 포인트를 ..

지금까지 배운 HTML로 UI는 신경쓰지 않고 HTML로 간단한 자기소개 페이지 만들어보겠음 안녕하세요 이도서입니다. 자기소개 저는 React 개발자를 꿈꾸는 개발자입니다. 보유 기술 Swift Flutter HTML 학습중 JavaScript 학습중 React 학습중 연락처 Email : 이메일 비공개 프로필 사진 노션 링크 내 노션 링크

제목 태그대 제목을 표현하는 h1부터 h6까지 존재 (기본이 볼드 스타일)안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요안녕하세요문단 태그p태그 안에 문장을 작성하면 문장이 사이트의 크기에 맞게 나열됨단, 중간의 문장의 줄바꿈을 원하면 ``태그를 사용해주면 됨 문단을 나타낼 때 사용하는 블럭태그인 p태그임 아무 말이나 써보자. 오늘날씨는 맑음 겨울이 왔나 날이 추움. 코딩 하기 너무 귀찮음 문단을 나타낼 때 사용하는 블럭태그인 p태그임 아무 말이나 써보자. 오늘날씨는 맑음 겨울이 왔나 날이 추움. 코딩 하기 너무 귀찮음 주의 사항p태그 안에 블럭 태그를 넣으면 블럭태그가 p태그 밖에 있는 것으로 됨! 안녕하세요! 안녕하세요! 이렇게 사용하면 안됨!-->텍스트 포맷, 서식hellohellohelloh..

웹 문서의 기본 구조 `` : DOCTYPE는 이 문서가 HTML 문서임을 알리는 선언부.아래에 있는`html` 태그가 사용되어지기 전에 선언되어야함`` : 이 `html` 태그는 html 문서 영역의 전체를 감싸는 태그`` : 브라우저의 머리 부분에 해당하는 정보를 담당`` : `meta` 태그를 사용해서 문서에 대한 설명을 작성하거나 파일 정보, 스크립트 정보 등을 작성-> 이 정보들은 사용자에게 보여지는 것이 아닌 브라우저나 검색 엔진에게 전달되는 영역`` : `title` 태그는 문서의 타이틀 -> 즉, 웹 사이트의 이름을 정의함`` : 본문 부분에 해당하는 정보를 담당 -> 사용자에게 직접적으로 보여지는 영역태그의 규칙``의 구조를 가짐 ex) 태그는 두 가지로 분류 됨짝을 이루는 태그혼..