본문 바로가기

전체 글192

(1)자료구조 ① 배열과 리스트 1. 숫자의 합 구하기 문제 Q. N개의 숫자가 공백 없이 써 있다. 이 숫자를 합해 출력하는 프로그램을 작성하시오. [입력] [출력] 1번째 줄에 숫자의 개수 N (1≤N ≤100), 2번째 줄에 숫자 N개가 공백 없이 주어진다. 입력으로 주어진 숫자 N개의 합을 출력한다. 풀이방법 1. numbers = '10987654321' 2. numbers -> 정수형으로 변환 3. 결과값에 더하여 누적 코드 순서 1. n값 받기 2. numbers 변수에 list 함수를 이용하여 숫자를 한 자리씩 나누어 받기 3. sum 변수 선언 4. for numbers 탐색 : sum 변수에서 numbers에 있는 각 자리수를 가져와 더하기 5. sum 출력 정답 n = input() numbers = list(inp.. 2024. 4. 9.
05. CSS 디스플레이, 폼, 포지션 1. CSS의 디스플레이 웹페이지의 레이아웃을 결정하는 속성 block, inline, inline-block, none, flex... visibility: hidden; visibility: visible; div{ background-color: deepskyblue; border: 3px solid red; margin-bottom: 30px; } p#none {display: none;} /*div 크기가 작아짐(실제로 사라짐!)*/ p#hiddin {display: hidden;} /*div 크기가 고정(안 보일 뿐!)*/ 디스플레이 display 속성값을 none으로 설정 display 속성값을 none으로 설정 visibility 속성값을 hidden으로 설정 visibility 속성값을 .. 2024. 4. 8.
04. 박스모델 1. 박스모델(Box Model) 모든 HTML 요소는 박스 모양으로 구성 박스 모델은 HTML 요소를 내용, 안쪽여백, 테두리, 바깥여백으로 구분함 내용 (content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분 안쪽여백 - 패딩(padding) 테두리 사이의 간격 또는 여백 padding-top, padding-left, padding-right, padding-bottom padding: 위 오른쪽 아래 왼쪽 순으로 설정 div{ width: 200px; height: auto; background-color: deeppink; margin: 20px; color: white; } #padding1 { padding: 10px 30px 20px 40px; } #padding2 { p.. 2024. 4. 8.
03. CSS 배경 1. CSS 배경 background-color : HTML 요소에 배경색을 설정 body { background-color: deepskyblue;} div { background-color: white; width: 60%; padding: 20px; border: 3px solid red;} css 배경1 배경 적용하기 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempora consequatur odio nulla eos voluptatibus reiciendis tempore error fuga mollitia quae qui sequi labore dignissimos laudantium, facere voluptates praese.. 2024. 4. 8.
02. CSS의 텍스트 1. CSS의 텍스트 letter-spacing : 텍스트 내에서 글자 사이의 간격을 설정 안녕하세요. 오늘은 월요일! 안 녕 하 세 요. 오 늘 은 월 요 일 ! word-spacing : 텍스트 내에서 단어 사이의 간격을 설정 안녕하세요. 오늘은 월요일! 안녕하세요. 오늘은 월요일! letter-spacing + word-spacing 예시 .letter {letter-spacing: 5px; color:#3d80eb;} .word {word-spacing: 7px; color:rgb(222,27,173);} css 텍스트1 letter-sapcing Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam natus iusto dicta q.. 2024. 4. 8.
@. 과제_나의 페이지 만들기 @. 과제_ 나의 페이지 만들기 - 나만의 페이지를 만들어보자! http://leesarah12.dothome.co.kr/ 2024. 4. 5.
01. CSS, 선택자, 컬러 1. CSS(Cascading Style Sheets) - 웹페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의하는 언어 style sheet - 웹 페이지의 스타일과 내용적인 부분을 서로 분리해 놓은 서식을 스타일 시트라고 함 - 이러한 스타일 시트를 이용하면 웹 페이지의 스타일을 편리하게 개발할 수 있음 CSS 문법 선택자 { 속성명: 속성값;} 선택자 { 속성명1: 속성값1; 속성명2: 속성값2;} HTML 문서 사이에 요소를 사용하여 적용하는 방법 외부 스타일 웹사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 적용하는 방법 rel: 현재 문서와 링크된 문서 사이의 연관관계를 명시 3. 선택자 전체 선택자 - 스타일을 모든 요소에 적용 (* 기호를 사용하여 표현.. 2024. 4. 5.
08. HTML의 디스플레이 1. inline - block 인라인(inline) - content의 크기 만큼남 자리를 차지하는 요소 - 텍스트, img, span 등 - 텍스트의 특징을 가지고 있음 블록(block) - 라인을 모두 차지하는 요소 - p, h, ul, li, div 등 - 면의 특징을 가지고 있음 span 태그 - 인라인 (inline) 특징을 가지고 있음 - 글자 단위로 영역 설정 - 웹 문서에서 특정 부분을 그룹화하거나 스타일을 적용하기 위해 사용됨 - 주로 텍스트 스타일링 또는 스크립트와 함께 특정 텍스트 또는 요소를 감싸기 위해 사용됨 div 태그 - 블럭 (block) 특징을 가지고 있음 - 면 단위로 영역이 설정 - 웹 문서의 구획을 나누거나 요소를 그룹화하기 위해 사용됨 - 주로 CSS 스타일링이나 .. 2024. 4. 5.
07. 폼태그 1. 품 태그 - 웹 페이지에서 사용자로부터 입력을 받을 때 사용하는 태그 모음 - 사용자가 입력한 데이터를 서버로 보낼 때 form 요소를 사용 기본형식 서버에 데이터를 전송하는 방법 예시) 네이버 주소 /search.naver --> 파일명 ? where 뒤에는 전달할 데이터 & query 뒤에는 날씨 url get : url에 데이터를 포함하여 전달하는 방법 (속도가 빠름 / 하이퍼링크 or 클릭으로 전송) post : 데이터를 body에 포함하여 전달하는 방법 (속도가 느림 / 폼태그에 입력된 것들을 전송) 2. Input 태그 - text: 문자를 입력받는 글상자 - password: 비밀번호를 입력받는 글상자 - radio: 여러 개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버.. 2024. 4. 5.

티스토리툴바