Bible, Lee, Data
Faith, software, data, and everyday life.
EngineeringAll posts
[CSS] 텍스트 속성, 웹 폰트, 수치 표현법
🍁텍스트 속성한글 Ipsum (간세네) 한글 Lorem Ipsum (간세네)로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종guny.kr 텍스트 관련 속성 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 대통령은 국가의 원수이며, 외국에 대하여 국가를 대표한다. 모든 국민은 학문과 예술의 자유를 가진다. 제1항의 지시를 받은 당해 행정기관은 이에 응하여야 한다. 대통령은 국회에 출석하여 발언하거나 서한으로 의견을 표시할 수 있다. 대통령은 법률이 ..
[CSS] 색상 및 이미지 표현법
🍁HTML과 CSS의 차이HTML은 특정 태그에 미리 정해져 있는 속성이 있다. 예로 들어 는 사용할 수 있지만, 는 사용할 수 없다.반면에 CSS는 모든 속성을 모든 태그에 적용 가능하며, 어떤 속성이든 선택자로 찾은 모든 태그에 적용 가능하다는 특징이 있다. HTML과 CSS 오류background-position: 50 50; /* 오류 */background-position: 50px 50px;HTML과 CSS는 에러 메시지를 띄우지 않는다.px를 지정해주지 않으면 잘못 사용한 것이지만, 에러 메시지가 발생하지 않으므로 조심하도록 한다. 🍁CSS 색상 표현법1. Color Name: red, yellow, blue..2. RGB Color(HEX-16진수): #FFFFFF3. RGB Color..
[Client] Emmet (Zen-Coding), Lorem Ipsum
🍁Emmet (Zen-Coding)CSS 선택자 문법을 사용해서 HTML/CSS 코드를 손쉽게 작성할 수 있도록 하는 기능이다.다양한 개발 도구(Eclipse, VS CODE..)에서 Emmet 기능을 지원하고 있다.주로 #, ., [], {}, +, >, $ 등의 선택자 노드를 조합하여 사용하며, Emmet은 생산성을 높여주는 생산성 도구라고 할 수 있다. li.item$*4>a{Item $} wait: 1000 tooltip: Run “Expan" data-og-host="emmet.io" data-og-source-url="https://emmet.io/" data-og-url="https://emmet.io/" data-og-image="https://scrap.kakaocdn.net/dn/by..
[CSS] CSS Seletor의 성질
🍁CSS Seletor의 성질1. 선택자 충돌2. 속성 충돌3. 선택자 우선순위 선택자 충돌 상자특정 태그를 찾는 선택자는 N개 이상 선언할 수 있다.물리적으로 문제가 되지는 않지만 코드 관리상 어려움이 있으므로 웬만하면 한 곳에 모아서 선언하는 게 좋다. 속성 충돌 상자위 코드에서는 선택자 충돌과 속성 충돌이 동시에 발생하고 있다.동일한 태그를 선택한 식별자들이 동일한 속성을 지정하면 충돌이 발생하며, 작성된 순서에 따라 마지막에 작성된 속성이 적용된다. 즉, 덮어쓰기가 적용이 된다. #box1 { color: orange; }.box { color: blue; }div { color: red; }그런데 위의 말대로 하면 파란색이 되어야 할 거 같은데, 주황색이 출력이 된다.이는 선..
[CSS] CSS Seletor (CSS 선택자) 2
🍁선택자1. 전체 선택자: * {}2. 태그 선택자: tag {}3. ID 선택자: #id {}4. class 선택자: .class {}5. 그룹 선택자: sel1, sel2, sel3 {}6. 자식 선택자: parent > child {}7. 자손 선택자: parent child {}8. 인접 형제 선택자: sel1 + sel2 {}9. 형제 선택자: sel1 ~ sel2 {} [CSS] CSS Seletor (CSS 선택자) 1🍁CSS 문법 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값;} 선택자 { 속성명: 값; } 선택자 { 속성명: 값; 속성명: 값; 속성명: 값; } CSS 문법으로 위의 틀을 사용한다. 선택자와isaac-christian.tistory...
[CSS] CSS Seletor (CSS 선택자) 1
🍁CSS 문법선택자 { 속성명: 값; }선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}선택자 { 속성명: 값;}선택자 { 속성명: 값; 속성명: 값; 속성명: 값;}CSS 문법으로 위의 틀을 사용한다.선택자와 값의 속성을 변경하면서 사용하며, 이때 속성은 늘어날 수 있다.문장 종결자가 있기 때문에 블럭 내에서 자유롭게 작성한다.CSS의 표기법 [Java] 변수 명명법 패턴: 파스칼 표기법, 캐멀 표기법, 스네이크 표기법, 케밥 표기법, 헝가리언변수명, 클래스명, 메소드명 등의 이름을 다음과 같이 지었더니 좀 더 관리하기 쉽다는 장점이 있어 공식화 되었다. 변수 명명법 패턴은 관습적이긴 하지만, 큰 개발 환경에서는 규칙을 따르지isaac-christian.tistory.com..
[CSS] CSS의 시작: HTML과 CSS 연결
🍁CSSCSS(Cascading Style Sheets)는 스타일 시트를 의미한다. CSS는 디자인을 담당하며, HTML 페이지의 서식을 만드는 언어이다. 독립 실행이 안 되며, 반드시 HTML 문서가 있어야 실행할 수 있다.HTML 서식 기능에서 CSS 서식 기능으로 확장하여 사용한다.CSS 주요 역할1. 스타일링HTML 요소들에 스타일을 적용하여 웹 디자인 작업을 한다. 2. 레이아웃요소들의 배치와 크기를 조절하는 페이지 레이아웃 작업을 한다. 3. 반응형 웹디바이스 크기에 맞춰 적절한 레이아웃과 스타일을 제공한다. 4. 웹 접근성 향상시각 장애인을 위한 스크린 리더의 작업을 한다. 🍁CSS의 시작html:5! html:5 또는 !를 Enter와 함께 입력하여 자동으로 html 초기 구성을 ..
[Client] 개발자 환경 구축: VS CODE 설치
🍁VS CODE 설치https://code.visualstudio.com/#alt-downloadsVS CODE를 운영체제에 맞게 설치하면 되며, .zip보다는 Installer 버전을 설치하는 것을 추천한다.User Installer는 현재 로그인한 계정만 사용할 수 있고, System Installer는 모든 윈도우 계정들이 사용할 수 있다.현재는 System Installer로 설치하는 걸로 한다. 설치 진행설치를 완료하면 위와 같이 VS CODE가 화면에 뜬다. VS CODE 업데이트VS CODE 왼쪽 하단의 설정, '업데이트 확인'에서 업데이트를 할 수 있다. 🍁VS CODE 설정Korean Language Pack for Visual Studio Code왼쪽의 꾸러미 버튼을 클릭하며 'Ko..
