본문 바로가기

Language

 (101)
<CSS 기초> 02. 기본적인 셀렉터 이번 장에서는 본격적으로 HTML문서에 스타일을 적용하기 위해 Selector들에 대해 알아보자. 1. Type 먼저 타입을 이용하여 지정하는 방법이다. 예를 들어 HTML문서의 h1 태그에 스타일을 적용하고 싶다면 다음과 같이 쓰는 것이다. h1 { color : blue } 위는 h1태그에 글자 색을 파란색으로 적용하는 코드이다. 2. Class 다음은 class 를 이용한 방법으로써 타입보다 세밀한 조정이 가능하다. HTML의 태그에 우리는 class라는 속성을 적용할 수 있었다. 거기서 지정한 클래스명을 CSS에 받아서 스타일을 적용할 수 있다. .name1 { background-color: blue; } div.name1.name2 { background-color: brown; } 먼저 na..
<HTML 기초> 08. 텍스트창 · 버튼 이번에는 input태그의 마지막으로 텍스트창과 버튼을 알아보자. 성격의 장단점 비교를 위해서 텍스트 타입도 입력해주었다. 구분을 위해서 br태그도 임시로 주었다. textarea태그는 input태그와 다르게 열고 닫음이 있다. textarea는 텍스트타입과는 다르게 여러 줄을 입력받을 수 있는 텍스트 창임을 알 수 있다. 다음은 마지막 폼형식의 태그로써 버튼을 알아보자. 출신 고등학교 서울 부산 기타 검색 수정 제출 버튼에 앞서 select 태그를 입력하였다. 셀렉트태그는 풀다운 메뉴를 보여주는 태그이다. 태그안에 option 태그를 통해 간단하게 메뉴들을 구성할 수 있다. select에 name과 id를 설정하였으므로 자식태그인 option은 자동으로 따라간다. 그러나 value는 개별로 설정하여야한다..
<파이썬 기초> 11. 튜플 이 글은 미시건 주립대학교 찰스 교수의 MOOC강의인 Python for Everybody를 수강하고 정리하며 쓰는 글입니다. 튜플은 리스트처럼 순서가 있어서 인덱스로 접근이 가능하다. max함수를 통해 최댓값을 쉽게 찾을 수도 있고 반복문도 사용하고 여러모로 편리하다. 그러나 리스트와 달리 변경이 불가능하다는 단점이 있다. 하지만 튜플은 변수를 여러 개 할당가능하다는 점에서 엄청나게 편리한 기능이고, 파이썬에서는 굳이 소괄호를 쓰지 않아도 튜플로 자동으로 인식한다. x, y = 1, 10 print(x, y) # 1 10 x와 y에 쉽게 값을 할당했음을 볼 수 있다. 튜플은 map함수와도 자주 어울린다. x, y = map(int, input('number : ').split()) print(x+y) ..
<HTML 기초> 07. 라디오 · 체크 박스 이번 시간에는 저번 글에 이어서 폼형식에서의 라디오박스와 체크박스를 배워보자. 모두 같은 input 태그이다. 즉 사용자에게 정보를 받기위한 목적이라는 것이다. 라디오박스는 하나만 선택하게 받는 박스이다. 주로 우리가 원형의 체크박스로 알고 있는 것이다. 공부하기 놀러가기 태그이며 타입을 radio로 하면 라디오박스가 생긴다. 이전 장에서 배웠듯이 id와 레이블의 for속성을 연결시켜준다. value는 서버에 전송할 값이라고 생각하면된다. 공부하기를 클릭했다고 공부하기라고 전송하는 것이 아니라 1 이라는 값만 전송하는 것이다. 라디오 박스는 하나만 선택되게 하는 것이 목적이다. 그러나 name을 지정하지 않으면 중복선택이 가능하다. 그 이유는 컴퓨터에게 같은 그룹이라고 알려주지 않으면 모르기 때문이다. ..
<CSS 기초> 01. CSS의 기본과 사용 1. CSS 기본 CSS는 Cascading Style Sheet의 약자이다. 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따른다. 이를 보완하기 위한 것이 스타일 시트이고 스타일 시트의 표준이 CSS이다. CSS는 즉 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다. 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. 즉 더 다양한 디자인을 더 효율적으로 할 수 있게 되었고 유지와 보수도 기존에 비해 간편해졌다. 2. CSS 사용 우리가 작성했던 HTML에서 CSS스타일을 입히는 방법은 총 3가지가 존재한다. 첫째, HTML문서의 태그에 속성으로 style을 주는 것이다. 이 스타일 속성에 CSS 코드를 입력함으로써 그 태그에..
<HTML 기초> 06. 인풋 · 레이블 이번에 배운 내용은 폼형식에서 인풋과 레이블이다. 인풋은 사용자에게 정보를 받기위해 사용하는 태그라고 이해하면 된다. 레이블은 그러한 인풋을 연결지어 설명해주는 역할이라고 볼 수 있다. 회원가입 이름 제목을 회원가입이라고 하고 살펴보자. 먼저 form을 형성해주었다. form은 사용자에게 정보를 받는 것이 목적이다. 따라서 action속성을 통해 API를 입력해야한다. 그렇게 해야 사용자의 정보를 우리의 서버로 가져올 수 있다. 그러나 여기서는 패스하겠다. 그리고 method 속성은 GET | POST 가 있다. GET과 POST모두 데이터를 전송하는 방식이다. GET은 URL에 정보를 담아서 보내는 방식이다. 길이에 제한이 있을 수 있다. POST는 body에 담겨서 전송되는 방식이다. 따라서 URL에..
<파이썬 기초> 10. 딕셔너리 이 글은 미시건 주립대학교 찰스 교수의 MOOC강의인 Python for Everybody를 수강하고 정리하며 쓰는 글입니다. 파이썬에는 앞서 배웠던 리스트와 비슷하게 딕셔너리가 존재한다. 차이점이라면 순서가 따로 없지만 키(Key)가 존재한다는 것이다. 키의 존재로 파이썬이 엄청난 강점을 갖게 된다. 키가 존재함으로써 값을 찾아낼 때 더 빠르고 더 적은용량으로 가능하게 한다고 한다. X = dict() X['AA'] = 10 X['BB'] = 30 X['CC'] = 70 print(X) print(X['AA']) X['BB'] = X['BB'] + 5 print(X) # {'AA': 10, 'BB': 30, 'CC': 70} # 10 # {'AA': 10, 'BB': 35, 'CC': 70} 먼저 di..
<HTML 기초> 05. 태그 : 인용 이번에 살펴볼 태그는 인용태그이다. * 인용 지나온 길을 돌아볼 때 필요한 건 후회가 아닌 평가이고, 앞으로의 길을 내다볼 때 필요한 건 걱정이 아닌 판단이다. 언어의 온도 中 어느 기업에서 글쓰기 강연을 마치고 화장실에 들어 갔다. 이런 문구가 적혀 있었다. 화장실을 깨끗하게 사용해주세요. 이곳을 청소해주시는 분들, 누군가에겐 전부인 사람들입니다. - 먼저 인용은 를 열고 닫으며 사용할 수 있다. - 이 때 속성으로 cite를 주어 출처 링크를 삽입할 수 있다. 예시는 그냥 표시만 해뒀다. - 태그를 통해 출처를 명시할 수 있다. - 태그는 문단 내에서 인용을 표시하는 방법이다. ※ html문서에서 특수문자를 인식시키려면 특수문자의 엔터티이름이나 엔터티번호로 표시해야한다. 위를 웹페이지로 보면..
<HTML 기초> 04. 태그 : 리스트 이번에 알아볼 내용은 리스트 태그이다. 리스트는 크게 ul(Unordered List), ol(Ordered List), dl(Description List)가 있다. * 목록 리스트 먼저 ul태그와 ol 태그를 알아보자. 비식별 기술 비식별 기술 데이터 마스킹 가명 처리 총계 처리 데이터값 삭제 데이터 범주화 - 태그는 열고 닫는 태그이며 자식태그로 오직 태그만 가질 수 있다. - 태그는 각각의 목록을 나타낸다. 따라서 다음과 같이 표현된다. - 순서가 별도로 없는 목록이 보여짐을 알 수 있다. 다음은 태그의 예시이다. 빅데이터 분석 방법론 분석 기획 데이터 준비 데이터 분석 시스템 구현 평가 및 전개 - 태그도 열고 닫으며 반드시 자식태그는 태그만을 가진다. - 위와 같이 태그는 순서가 표시된다. -..
<HTML 기초> 03. 태그 : 링크 · 이미지 이번에 공부해 볼 내용은 링크와 이미지 태그이다. * 앵커태그 Welcome! Hi! I'm Harry. Welcome to my blog. MAIL - 앵커태그 는 링크를 삽입하기 위한 태그이다. - 태그는 속성으로 반드시 href가 주어져야하며 값으로는 4가지가 들어갈 수 있다. 1. 웹 URL 2. 페이지 내 이동 ( #섹션) 3. 메일쓰기 ("mailto : 메일주소") 4. 전화걸기 ("tel : 전화번호") - target 속성으로 _blank를 삽입하면 새탭에서 열리도록 설정할 수 있다. 따라서 위의 코드는 다음과 같이 표현된다. * 이미지태그 - 이미지 태그는 를 사용하며 열고닫음 없이 바로 닫으며 이미지를 보여주는 태그이다. - 반드시 src속성을 주어야 한다. src는 소스이며 상대경로..

티스토리툴바