본문 바로가기

부스트코스40

css 스타일이 적용되는 규칙 CSS cascading cascading은 CSS의 스타일 규칙들이 적용되는 단계적인 규칙을 뜻한다. 폭포처럼 단계적으로 적용되는 규칙에 대해 알아보자. cascading 규칙은 3가지이다. 1. 중요도와 출처 2. 구체성 3. 선언 순서 1. 중요도와 출처 중요도는 !important의 선언 여부로 판단된다. div { width: 100px !important; } 가장 먼저 이 중요도를 체크하고, !important가 선언된 스타일끼리는 출처, 구체성, 선언 순서의 순서로 규칙을 체크하여 적용된다. 출처는 제작자, 사용자, 사용자 에이전트로 구분된다. 제작자는 사이트를 제작한 개발자가 직접 작성한 CSS, 사용자는 웹 페이지를 방문하는 사용자들이 작성한 CSS, 사용자 에이전트는 일반 사용자의 브라우저에 내장된 CSS를 .. 2020. 11. 21.
margin과 padding의 차이점 HTML은 4가지 박스 형태로 만들어진다. 이 4가지 영역을 박스모델이라고 한다. 브라우저에서 개발자 도구를 열고, Elements의 coumputed 탭을 열면 나오는 이 네모 박스가 바로 boxmodel을 나타내는 것이다. 가장 안쪽부터 Content 영역, Padding 영역, Border 영역, Margin 영역이다. Content는 요소의 실제 내용을 포함하는 영역으로, 내용의 너비 및 높이를 나타낸다. Border는 Content 영역을 감싸는 테두리 선이다. Padding은 Content와 Border 사이의 여백을 나타낸는 영역이다. Content 영역이 배경색이나 배경 이미지를 가질 때, 이 Padding 영역까지도 영향을 미친다. 즉, Padding 영역도 Content의 연장으로 볼 .. 2020. 11. 21.
시멘틱 마크업 시멘틱은 의미론적이란 뜻이다. 즉, 시멘틱 마크업이란 의미론적인 마크업이라는 말이다. 브라우저(컴퓨터)가 잘 이해할 수 있는 코드라는 뜻이다. 의미에 맞는 요소를 사용하고 문서의 구조화를 잘 하여 인간과 기계가 모두 이해할 수 있는 코드를 짜야한다는 것이다. 1. 의미에 맞는 태그 사용 아래는 화면으로 보기엔 같은 모습으로 표현되나 단순 표현용 태그와 의미를 가지는 태그로 차이가 있는 몇가지 태그들이다. 굵은 vs 중요한 밑줄친 vs 새롭게 추가된 중간선이 있는 vs 삭제된 예를 들어 태그와 태그는 보기엔 굵은 글자로 같은 효과를 주는 것처럼 보이지만, 태그는 그저 굵은 글씨를 만들어주는 태그이고, 태그는 중요한 글자를 나타내는 태그이다. 태그도 보기엔 그저 태그처럼 굵은 글자로 표현되지만, 브라우저에서.. 2020. 7. 20.
HTML 문서의 기본 구조 - DOCTYPE과 <html> 요소 head 태그와 meta 태그에 들어갈 것들까지... HTML의 기본적인 구조는 다음과 같다. Hello, HTML 크게 문서 타입 정의와 요소로 구분한다. 1. 문서 타입 정의 문서 타입 정의는 DTD(doctype)라고 부른다. 위 코드에서 가장 상단에 있는 를 가리킨다. (은 대소문자 상관이 없다.) 이처럼 문서 타입 정의는 최상단에 선언되어야 한다. 문서가 어떤 버전으로 작성되었는지를 브라우저에게 알려주는 선언문이기 때문이다. 예시 코드의 은 이 문서가 HTML5로 작성되었다고 알려주는 것이다. DOCTYPE을 선언하지 않거나 잘못 선언하면 브라우저는 이 문서를 비표준 방식으로 해석해버린다고 한다. HTML 버전별 DOCTYPE 선언문이다. - HTML 5 - HTML 4.01 Strict 같은 .. 2020. 2. 23.
코드에 메모하는 법 - 주석(Comment) 주석은 코드 내에 작성하는 메모라고 생각하면 된다. 주석 처리된 부분은 프로그램이 해석하지 않는다. 사용자와 프로그램에겐 노출되지 않는 부분, 즉, 개발자들을 위한 장치인 것이다. 프로그램이 클 수록 코드를 알아보기가 어려워진다. 특히 협업하는 경우, 주석으로 다른 개발자들을 도와줄 수 있다. 다른 개발자뿐만 아니라, 자신에게도 마찬가지다. 예를 들어, 테스트 코드나 임시로 작성된 코드가 있을 때, 이걸 주석으로 알려주면 좀 더 빠르게 코드를 이해할 수 있을 것이다. 프로그래밍 언어마다 주석 처리하는 방법이 조금씩 다르다. 아래로 HTML, CSS, JavaScript, Java의 주석 처리 방법에 대해 정리하였다. 1. HTML 1) HTML은 다음과 같이 주석을 처리한다. 로 닫는다. 이 사이에 들어.. 2020. 1. 2.
로컬 테스트 서버 Python의 SimpleHTTPServer 웹 브라우저에서 로컬 파일 경로로 파일을 열면, 비동기 요청으로 외부 데이터를 읽어올 수 없다. 웹 보안 때문에 다른 경로의 파일에 접근할 수 없다. 하지만 연습이나 테스트를 할 때는 어떻게 해야 할까? 간단하게 로컬 웹 서버로 실행하면 된다. 가장 쉬운 방법이 파이썬(Python)의 SimpleHTTPServer라고 한다. 리눅스, 맥 OS X 사용자라면 이미 시스템에 설치되어 있을 것이다. 윈도우 사용자는 따로 설치해야 한다. 1. Python 설치하기 먼저 Python 홈페이지로 가야 한다. 아래 Download 영역에 있는 Latest:Python 3.7.4(혹은 다른 숫자일 수도 있음) 링크를 클릭한다. 최신 버전 파이썬 다운로드 페이지로 이동한다. 만약 상단의 메뉴로 이동한다면, Downloa.. 2019. 10. 7.
File.separator로 OS 상관없이 파일 경로 구분하기 운영체제마다 파일 경로 구분자가 다르다. 윈도우는 \ (요즘 윈도우는 /도 인식한다고 한다), 리눅스와 맥은 / 로 말이다. 이런 OS에 따른 경로 차이를 신경 쓰지 않고, 파일 경로를 설정하고자 한다. 이럴 때, java.io 패키지의 File 클래스의 separator 필드를 사용한다. import java.io.File; ... String path = File.separator+"fileName"+File.separator+"sample.jpg"; 위 코드의 path는 /fileName/sample.jpg or \fileName\sample.jpg가 될 것이다. 윈도우의 루트(root)는 윈도우가 설치된 C드라이브로 인식한다. 그래서 /나 \로 시작하는 파일 경로는 root 경로 아래부터 시작한다.. 2019. 10. 4.
CSS Layout - position 속성 CSS의 position 속성은 HTML 요소들의 위치를 설정하는 데 사용된다. position 속성의 값으로는 static, relative, absolute, fixed, sticky 이렇게 다섯 가지가 있다. 요소를 배치하는 방법의 유형이며, 각 유형에 따라 top, bottom, left, right 속성으로 위치를 조절할 수 있다. 1. static HTML 요소의 기본 position 값이 static이다. 정적 위치로 top, bottom, left, right 속성에 영향을 받지 않는다. See the Pen css position static by Park EunAe (@eapark) on CodePen. 이렇게 css로 직접 position: static을 지정하든 아무 설정을 하지 않.. 2019. 10. 3.
자바 날짜 데이터 생성하기 1. Date, Calendar 자바에서 날짜 데이터를 생성하거나 조작할 때 가장 먼저 떠오르는 것, java.util 패키지의 Date 클래스이다. import java.util.Date; ... Date currentDate = new Date(); 이런 식으로 현재 날짜 데이터를 생성할 수 있다. 특정 날짜를 생성하거나 날짜를 계산할 땐 Calendar 클래스를 사용한다. import java.util.Calendar; ... Calendar cal = Calendar.getInstance(); cal.set(2019, Calendar.OCTOBER , 2); cal.add(Calendar.DATE, 7); 이런 식으로 2019년 10월 2일 날짜를 생성하고 7일을 더할 수 있다. 만약 날짜의 포맷.. 2019. 10. 2.
UUID로 파일 이름 중복 방지하기 UUID는 범용 고유 식별자(Universally Unique IDentifier)를 뜻한다. UUID에 관한 더 자세한 내용은 Kakao DB Team MySQL 서버에서 UUID 활용에서 참고. 파일을 업로드할 때, 같은 이름의 파일을 업로드하면 기존 파일이 다른 파일로 덮어씌워질 수 있다. 이를 방지하기 위해 파일의 이름을 UUID로 생성하여 저장하고자 한다. UUID가 중복이 전혀 없는 것은 아니지만, 중복될 확률은 희박하다고 한다. 그래도 미연의 상황을 방지하고자 한다면, File 객체의 exists()를 활용하여 같은 파일이 있는지 확인하고, 뒤에 숫자나 날짜 등을 붙여주는 코드를 추가하면 될 것이다. 아래 코드는 UUID를 랜덤으로 생성하는 코드이다. String extension = fil.. 2019. 9. 17.

티스토리툴바