본문 바로가기

분류 전체보기125

CSS 자주 쓰는 스타일 속성 CSS 자주 쓰는 스타일 속성1. 색상color: red; /* 글자색 */background-color: yellow; /* 배경색 */컬러 표기 방식이름 : red, blewRGB : rgb(255, 0, 0)HEX : #ff0000 2. 폰트 설정font-size: 16px; /* 글자 크기 */font-family: Arial; /* 글꼴 */font-weight: bold; /* 글자 굵기 */ 3. 텍스트 정렬text-align: left; /* 왼쪽 정렬 */text-align: center; /* 가운데 정렬 */text-align: right; /* 오른쪽 정렬 */ 2025. 4. 19.
CSS 선택자 (selector) CSS 선택자선택자는 어떤 HTML 요소에 스타일을 줄지를 정하는 기준이다.1. 태그 선택자HTML 태그 전체에 적용p { color: gray;} 2. 클래스 선택자 .클래스명HTML에서 class="이름"으로 지정된 요소에 적용첫 문단.intro { font-size: 20px; color: blue;} 3. 아이디 선택자 #아이디명HTML에서 id="이름"으로 지정된 요소에 적용제목#main-title { text-align: center; color: darkgreen;}id는 문서 내에서 1번만 사용해야 함 2025. 4. 19.
CSS 작성 방법 3가지 CSS는 웹페이지를 꾸며주는 언어다.HTML로 만든 구조에 색을 입히고, 폰트를 바꾸고, 여백을 주는 등 "디자인" 역할을 한다. CSS 작성 방법 3가지1. 인라인 스타일HTML 태그 안에 직접 style 속성을 써서 적용하는 방법빨간색 문장간단한 테스트나 임시 스타일에만 추천하는 방식 2. 내부 스타일 (internal CSS)HTML 파란색 문장소규모 프로젝트나 연습용으로 좋다. 3. 외부 스타일 (External CSS)CSS 코드를 .css 파일로 따로 분리해서 연결하는 방식예시) index.html 와 style.css 파일로 index.html에서는 아래와 같이 연결 style.css의 내용은 이렇게p { color: green; font-weight: bond;}웹사이트 만들땐 .. 2025. 4. 19.
HTML 연습 예제 2025.04.19 - [HTML, CSS] - HTML 구조 이해 HTML 구조 이해HTML 구조 이해HTML 문서는 기본 틀이 정해져 있다. 웹 브라우저가 이 구조를 기준으로 웹페이지를 보여준다. 실제로 보이는 내용이 들어감 각 부분 설명태그설명HTML5 문서라고 알려주는 선언전체check22.tistory.com2025.04.19 - [HTML, CSS] - HTML 텍스트 관련 기초 태그(제목, 문단, 강조) HTML 텍스트 관련 기초 태그(제목, 문단, 강조)텍스트 관련 태그1. 제목 테그 ~글 제목을 표시할 때 사용숫자가 작을수록 글자가 크고 굵음제목 1제목 2제목 3 2. 문단 태그 일반적인 본문 내용을 쓸 때 사용문단입니다. 문단 글 작성 칸 3. 강조check22.tistory.com20.. 2025. 4. 19.
HTML 링크, 이미지, 리스트 2025.04.19 - [HTML, CSS] - HTML 텍스트 관련 기초 태그(제목, 문단, 강조) HTML 텍스트 관련 기초 태그(제목, 문단, 강조)텍스트 관련 태그1. 제목 테그 ~글 제목을 표시할 때 사용숫자가 작을수록 글자가 크고 굵음제목 1제목 2제목 3 2. 문단 태그 일반적인 본문 내용을 쓸 때 사용문단입니다. 문단 글 작성 칸 3. 강조check22.tistory.com 링크, 이미지, 리스트1. 링크 테그 다른 페이지나 사이트로 이동하게 해주는 태그href는 이동할 주소구글로 가기 2. 이미지 태그 이미지 넣을 때 사용src는 이미지 주소, alt는 이미지가 안 보일 때 표시될 대체 텍스트 3. 리스트 태그순서 없는 리스트 : 순서 있는 리스트 : 항목은 로 표시 사과 바나나 .. 2025. 4. 19.
HTML 텍스트 관련 기초 태그(제목, 문단, 강조) 2025.04.19 - [HTML, CSS] - HTML 구조 이해 HTML 구조 이해HTML 구조 이해HTML 문서는 기본 틀이 정해져 있다. 웹 브라우저가 이 구조를 기준으로 웹페이지를 보여준다. 실제로 보이는 내용이 들어감 각 부분 설명태그설명HTML5 문서라고 알려주는 선언전체check22.tistory.com 텍스트 관련 태그1. 제목 테그 ~글 제목을 표시할 때 사용숫자가 작을수록 글자가 크고 굵음제목 1제목 2제목 3 2. 문단 태그 일반적인 본문 내용을 쓸 때 사용문단입니다. 문단 글 작성 칸 3. 강조 태그 , : 굵게 강조 : 기울여서 강조Important you must remember.Point you can use. 2025.04.19 - [HTML, CSS] - HTML 링크.. 2025. 4. 19.
HTML 구조 이해 HTML 구조 이해HTML 문서는 기본 틀이 정해져 있다. 웹 브라우저가 이 구조를 기준으로 웹페이지를 보여준다. 실제로 보이는 내용이 들어감 각 부분 설명태그설명HTML5 문서라고 알려주는 선언전체 HTML 문서 시작과 끝눈에 보이지 않는 정보(제목, 스타일 등)브라우저 탭에 표시되는 제목사용자가 실제로 보는 부분(글,이미지,버튼 등) 2025.04.19 - [HTML, CSS] - HTML 텍스트 관련 기초 태그(제목, 문단, 강조) HTML 텍스트 관련 기초 태그(제목, 문단, 강조)텍스트 관련 태그1. 제목 테그 ~글 제목을 표시할 때 사용숫자가 작을수록 글자가 크고 굵음제목 1제목 2제목 3 2. 문단 태그 일반적인 본문 내용을 쓸 때 사용문단입니다. 문단 글 작성 칸 3. 강조.. 2025. 4. 19.
파이썬 가상환경(Virtual environment) 장단점 python venv 가상환경을 만들면 좋은 점 - 장점장점설명🧼 패키지 충돌 방지프로젝트마다 독립적인 라이브러리 설치가 가능해서, 버전 충돌 없이 개발 가능🧪 테스트 환경 분리실서비스용 코드와 테스트용 환경을 나눌 수 있음🔄 버전별 관리 용이특정 프로젝트에만 특정 버전의 라이브러리를 설치 가능 (예: Django 2.x / 4.x 각각 사용 가능)🚫 시스템 환경 보호시스템에 설치된 Python을 망가뜨릴 걱정 없이 실험 가능💼 협업에 유리requirements.txt 공유만으로 동일한 환경 쉽게 구성 가능가상환경의 아쉬운 점 - 단점단점설명💾 디스크 공간 더 사용프로젝트마다 Python과 라이브러리 복사본이 생기므로 용량이 늘어남🧠 초보자에게는 개념이 낯설다초반에 venv, activate, pip, deact.. 2025. 4. 17.
VSCode에서 파이썬 가상환경 연결하는 방법 VSCode에서 가상환경 연결하는 방법1. VSCode로 프로젝트 폴더 열기가상환경이 있는 폴더(예: ~/Desktop/myenv 말고, 프로젝트 루트 폴더)를 VSCode로 연다.cd ~/Desktop/my_project # 예: 여기에 myenv가 있음code . # VSCode로 현재 디렉토리 열기code . 명령어가 안 되는 경우[Command + Shift + P] →Shell Command: Install 'code' command in PATH 눌러 설치하면 가능하다.2. 좌측 하단 "Python 인터프리터" 선택VSCode 하단 왼쪽에 보면 Python 3.x.x 또는 Select Interpreter라고 써 있는 부분이 있다.클릭하면 현재 연결된 파이썬 가상환경이 보인다.3. myen.. 2025. 4. 17.

티스토리툴바