cleveryellowduck의 등록된 링크

키자드에 등록된 총 267개의 포스트를 확인하실 수 있습니다.

Naver Blog

[Day1] 01 웹 개발 기본 다지기

HTML을 작년에 공부했었는데 다 잊어버려서... 다시 시작하는 마음으로 Do it! HTML+CSS+자바스크립트 웹 표준의 정석(한 궈으로 끝내는 웹 기본 교과서)를 구매했습니다! http://book.naver.com/bookdb/book_detail.nhn?bid=17764401 Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 웹 분야 1위! 그만한 이유가 있다!키보드를 잡고 실습하다 보면 웹 개발의 3대 기술이 끝난다!웹의 기본을 한 권으로 끝낼 수 있는 책이 탄생했다! 8년 연속 웹 분야 도서 1위인 《Do it! HTML5+CSS3 웹 표준의 정석》의 고경희 저자는 ‘HTML, CSS, 자바스크립트를 한 권으로’ 배우고 싶다는 많은 독자의 요구를 모아 최신 경향을 반영한 이 책을 집필했다. 웹 개발을 시작하는 입문자도 쉽게 실습할 수 있고, 중요한 문법만 다시 공부하고 싶은 중ㆍ고급자에게도 도움이 된다.친절한 설명은 기본! 핵심만 쏙쏙 뽑아서 실무에...

원문보기 내부링크
Naver Blog

[Day 2] 02 웹 개발 환경 만들기 - 비주얼 스튜디오 코드 설치 및 개발 환경 만들기

1. 비주얼 스튜디오 코드 설치 아래의 사이트에서 다운로드 합니다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com 2. 한글 언어 설정하기 ① 확장 아이콘 클릭 ② Korean Langage Pack for Visual Studio Code 검색 ③ 설치 버튼 눌러서 설치 (저는 설치되어 있어서 제거라고 써있습니다. 아래 사진에서 제거라고 써있는 부분을 클릭해주시면 됩니다.

원문보기 내부링크
Naver Blog

[Day 3] HTML 기본 문서 만들기

이번 게시물에서는 HTML에 대한 기본적인 내용을 다루겠습니다. HTML 의 정의와 Tag(태그)에 대해 알아보겠습니다! HTML(Hyper Text Markup Language) : 웹 문서 만들어 주는 언어 : Hyper Text(문서를 서로 연결) Markup Language(웹 브라우저에 텍스트, 이미지, 영상 등의 위치를 표시) - 태그(Tag) HTML 문법에서 대부분의 요소들은 시작 태그와 종료 태그로 작성되며 그 사이에 내용이 들어갑니다. HTML 태그는 요소 이름, 또 그 요소를 둘러싸는 꺾쇠괄호로 이루어집니다. 종료 태그 또한 꺾쇠괄호를 연 뒤 슬래시를 넣어 시작 태그와 구별합니다. 아래에서 빨간색으로 작성 된 부분이 '태그'입니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>안녕하세요</title> </head> <body> <h1>html 태그 기본 연습</h1> <hr> <p>h

원문보기 내부링크
Naver Blog

[Day 4] 웹 문서에서 텍스트 작성(HTML의 다양한 태그들 - 1)

이번 게시물에서는 웹 문서에서 '텍스트를 작성'에 쓰이는 다양한 태그들을 알아 보겠습니다 ㅎㅎ ① <hn> 태그 (n : 1~6사이 숫자) - 제목 태그 - <h1>이 가장 크고 n의 숫자가 커질 수록 제목의 크기가 작아짐. <h1>제일 큰 제목 크기</h1> <h6>제일 작은 제목 크기</h6> ② <p> 태그 - 텍스트 단락을 만드는 태그(텍스트 앞뒤로 빈 줄 생성됨) <p>이 태그를 이용하면 텍스트 단락을 만들 수 있습니다.</p> ③ <br> 태그 - 줄 바꿈 태그 - 닫는 태그가 없음 ④ <hr> 태그 - 수평 줄 태그 - 닫는 태그가 없음 ⑤ <b> 태그 - 굵게 표시하는 태그 (강조는 아님) <b>굵게 글씨 표시</b> ⑥ <strong> 태그 - 굵게 표시하는 태그. '강조' 할 때 사용 <strong>굵게 강조 표시</strong> ⑦ <i> 태그 - 기울어진 글자(이탤릭체) - 마음속의 생각 or 용어 or 관용구에 사용 <i>기울인 텍스트</i> ⑧ <em> 태그

원문보기 내부링크
Naver Blog

[Day4] 웹 문서에서 목록 작성하기(순서있는 목록, 순서없는 목록, 설명 목록)(HTML의 다양한 태그들 - 2)

오늘은 HTML에서 목록을 작성하는 데에 필요한 태그들을 살펴보겠습니다! 1. 순서 있는 목록을 만드는 태그들 -> <ol> 태그와 <li> 태그 1. ~~~ 2. ~~~ 3. ~~~ ↑이런식으로 순서 있는 목록을 만들 수 있습니다. <ol> <li>순서 있는 목록 1</li> <li>순서 있는 목록 2</li> </ol> * <ol> 태그의 속성 5가지 <ol type="1"> <ol type="a"> <ol type="A"> <ol type="i"> <ol type="I"> 사용 예) <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>순서 있는 목록 만들기</title> </head> <body> <h2>기분이 좋아지는 법</h2> <p><b>준비물 : </b>손</p> <h4>순서</h4> <ol type="1"> <li>계획한 일을 성취한다.</li> <li>나 자신에게 잘했다고 박수를 쳐준다!!!</

원문보기 내부링크
Naver Blog

[Day 4] 표 만들기(HTML의 다양한 태그들 - 3)

이번 게시물에서는 표를 만들 때 사용하는 태그들에 대해 살펴보겠습니다! 1. 표의 기본 틀을 만들기 위해 사용하는 태그들 -> <table> 태그, <tr>태그, <th> 태그 , <td>태그 표의 시작을 알리는 <table> 태그, 종료를 알리는 </table>태그 <tr> : 행(가로줄) <th> : 행 제목(진하게 표시, 가운데 정렬) <td> : 표의 각 셀 <caption> : 제목 <table> <caption>표 제목</caption> <tr> <th>1행 1열(행제목)</th> <th>1행 2열(행제목)</th> </tr> <tr> <td>2행 1열(셀 내용)</td> <td>2행 2열(셀 내용)</td> </tr> <tr> <td>3행 1열(셀 내용)</td> <td>3행 2열(셀 내용)</td> </tr> 사용 예) <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>표의 기본</title>

원문보기 내부링크
Naver Blog

[Day 5] 이미지, 오디오, 비디오, 다양한 파일, 하이퍼링크 삽입(HTML의 다양한 태그들 - 4)

1. 이미지 삽입에 사용하는 <img> 태그 - 닫는 태그 없음 <img src="파일경로" width="너비" height="높이" alt="대체텍스트"> - width="100%" 라고 명시하면 이미지를 웹 브라우저 창 너비에 딱 맞출 수 있음 2. 오디오 삽입에 사용하는 <audio> 태그 <audio src="파일 경로" loop="반복횟수" controls></audio> audio 태그 속성(속성은 안써도 됨 선택사항) - controls : 미디어 제어기(컨트롤 바) 표시 - autoplayer : 자동 실행 (브라우저에 따라 이 속성이 안될 수도 있음. 그 경우 muted 속성 사용해서 음소거 해주면 속성 사용 가능) - ㅣoop : 반복 횟수 설정 - width, heiht : 너비와 높이 설정 - muted : 오디오나 비디오 소리를 제거 - preload : 페이지를 불러올 때 오디오 파일을 어떻게 로딩할 것인지 지정. auto, metadata, none 사용

원문보기 내부링크
Naver Blog

[마스크팩] 순플러스 하이 액티브 세럼 마스크[포어 타이트]

오늘은 순플러스의 하이 액티브 세럼 마스크 3종 중 하나인 '순플러스 하이 액티브 세럼 마스크[포어 타이트]'에 대해서 작성해보고자합니다. 이번 게시물이 순플러스의 하이 액티브 세럼 마스크 3종 마지막이 되겠네요! 이 마스크는 모공 케어를 중점으로 만든 마스크 입니다. 그래서 마스크 뒷면에 보면 '모공 케어 에센스와 굴곡 없는 밀찰력의 3중 레이어 시트로 탄력감있는 모공 쫀쫀 케어 패드 마스크'라는 문구가 적혀져 있습니다. 그럼 이제 순플러스 하이 액티브 세럼 마스크[포어 타이트] 성분을 살펴보겠습니다. 순플러스의 하이 액티브 세럼 마스크 3종 중에서는 가장 성분들이 간단한 것 같습니다. 그렇다고 안 좋은 것이 아니라, 특정 성분들에 집중하여 모공 관리를 해주는 것 같습니다! <전성분> 정제수, 프로판다이올, 부틸렌글라이콜, 베타인, 석시닉애씨드, 1,2-핵산다이올, 트로메타민, 다이소듐이디티에이, 에틸헥실글리세린, 바이오사카라이드검-1, 트레할로오스, 살비아잎추출물, 버지니아풍년화

원문보기 내부링크
Naver Blog

[마스크팩] 이니스프리 트러블 솔루션 마스크[칼라민]

오랜만에 이니스프리 매장을 들려서 마스크팩을 종류별로 하나씩 여러 개 사왔습니다! 하나씩 써보고 이전 게시물과 같이 성분들을 살펴보고, 모두 게시물을 써서 올리겠습니다:) 구입한 마스크팩 중 제일 처음 사용한 마스크팩은 '이니스프리 트러블 솔루션 마스크[칼라민]'입니다! 최근에 여자의 그날이 찾아와서..ㅎㅎ 뾰루지가 올라와서 진정을 위해 먼저 사용해보게되었습니다. 이 마스크팩은 보통 마스크팩과 다르게 마스크팩(센텔라 수딩 시트)+칼라민 앰플의 조합으로 되어있습니다. 아래의 시트팩 사용 후, 위쪽의 앰플을 바르면 되는 섬세한 관리를 해주는 마스크 팩이었습니다. 그럼 이제 이니스프리 트러블 솔루션 마스크[칼라민]의 전성분을 살펴보겠습니다. <전성분> STEP 1. 센텔라 수딩 시트 정제수, 글리세레스-26,글리세린, 1,2-핵산다이올, 알지닌, 카보머, 베타인, 판테놀, 부티렌글라이콜, 녹차추출물, 생강추출물, 스페인감초뿌리추출물, 콥티스뿌리추출물, 잔탄검, 다이포타슘글리시리제이트, 에

원문보기 내부링크
Naver Blog

[스킨패드] 코스알엑스 원스텝 오리지널 클리어 패드

오늘은 간단하게 글로 쭉 적는 대신 카드 뉴스를 제작해보았습니다! (학생회일을 하다가 카드 뉴스를 만드는 일에 재미를...ㅎㅎ) 카드 뉴스에 사용된 사진도 직접 촬영한 것이에요! 그럼 코스알엑스의 원스텝 오리지널 클리어 패드를 간단히 카드뉴스를 통해 알아볼까요? ※ 이 게시글의 모든 저작권은 저에게 있습니다.※ ※모든 사진들을 허가없이 복사하실 수 없습니다.※ #코스알엑스 #오리지날클리어패드 #흰버드나무껍질수 #베타인살리실레이트 #BHA

원문보기 내부링크
Naver Blog

[1주차] '화학'과 '재료'란?

1. 화학? - 물질의 본질(구성원소, 결합방식, 화학구조)을 규명하고, 물질의 변화(화학적&물리적 변화)와 물질 간의 상호작용을 연구하는 자연과학의 한 분야 cf)고분자 - 플라스틱, 섬유, 고무 2. 재료? 1) 형체(모양)가 있는 '물체'제품의 소재 -> 형체 중요, 형체가 유지되어야함, 기계적 성질 중요 * 재료 내의 원자들의 전자구조와 결합방식에 따른 분류 -> 3대 재료: 금속, 세라믹, 고분자 2) '물체'가 아닌 제품의 소재 ->형제 중요x, 형제 유지되지x(사용 후 없어짐), 기계적 물성 필요x ex) 생체기능재료, 계면화학재료, 색소재료, 예술적 표현을 위한 재료, 음식재료 cf) 재료과학의 발전이 과학기술 발전의 토대가 됨 ex)컴퓨터에서 hardware에 해당되는 것은 모든 부분이 재료로 구성됨 ※아래의 사진은 해당 게시물과 관련이 없습니다. (귀여워서 첨부합니다.) #화학 #재료 #노란오리의하루기록

원문보기 내부링크
Naver Blog

[1주차] 제1부 재료과학 기술 혁명 - 첨단산업과 신소재

1. 첨단 산업의 발전을 위해 신소재 개발은 필수적 1) 우리 주변의 재료 : 형체가 있는 모든 것의 기본 물질 재료 전통적재료 신소재 대량생산/소비, 저렴 대량생산/소비, 고가 ex) 콘크리트, PET, PVC ex) 반도체재료, OLED재료 ->과거 : 브라운관모니터(CRT) vs 현재 : 액정 모니터(LCD) 2) 제품 개발 - 신소재 개발 : 유기적 관계 재료탐색 or 응용 3) 신소재 개발은 필수적 (for 첨단 산업 발전) 첨단 산업들 필요 재료 조건 운송수단 중 전기자동차 (충전용량↑, 빠른 충전, 배터리 무게↓ 되어야) 해양 개발 (초고압, 부식에 잘 견뎌야) 에너지(핵분열, 핵융합 등) (초고온에 잘 견뎌야) 항공 및 우주개발 초고온, 초저온, 초진공에 견뎌야 군수 고강도 잘 견뎌야 전자 크기↓, 속도↑, 용량↑ 에 맞는 재료 의료 생체적합성↑ 2. 신소재? : 성능면에서 기존의 재료보다 뛰어나거나 기존의 재료가 가지고 있지 않은 새로운 기능을 갖고 있어 그 효용 가

원문보기 내부링크
Naver Blog

[2주차] 제1부 재료과학 기술 혁명 - 재료과학 기술

0. 기본 지식 1) 재료나 소재의 품질(성능, 기능, 특성 등) -> 부품의 질 -> 제품의 품질과 성능 -> 소재의 품질이 제품의 품질을 좌우 2) 소재 개발의 방향 2가지 ① 기존 재료의 특성 개선 (ex) scratch, crack 잘 생기지 않는 소재 ② 새롭고 고유한 기능을 갖는 재료의 합성(ex) self-healing 소재(자기치유 소재) 1. 재료과학 -> 기계적 특성, 전기적 특성, 열적 특성, 광학적 특성, 자기적 특성, 화학적 특성 ① 재료의 내부구조(또는 미세구조)를 관찰 -> 내부구조(원자 종류, 원자 간 결합, 화학 구조, 조성, 원자/분자 배열) ② 재료의 내부구조의 변화를 관찰 ex) 불규칙 -> 규칙 ③ 재료의 내부구조와 특성간의 상관 관계를 규명 cf) 고리구조는 규칙적으로 배열하기 위해 유리한 구조.. 2. 재료의 제조 기술 재료과학에 의해 설계된 내부구조를 갖도록 재료를 제조하는 기술 EX1. nanoporous(다공성) materials (na

원문보기 내부링크
Naver Blog

기기분석 정리(1) - 기기분석의 정의, 장점, 한계점, 분류 등

기기분석은 분석화학(Analytical chemistry)을 하기 위한 하나의 방법 분석화학은 정량(quantification)과 정성 분석이 있음. what is it(이게 뭐냐)(조성) -> 정성분석 How much is it(얼마나 들어있냐) -> 정량분석 정성분석이랑 정량분석 합쳐서 separation(분리)가 필요함 분석화학은 측정하고 특성화하는 것이 핵심. 그러다보니 측정화하는 기기가 필요함 분석법의 구성 - 어떤 기기를 쓸 것인지 - 어떤 방법을 쓰는지 분석화학이 왜 중요하냐… 일본의 한국 수출규제 반도체 소재 등 3개 품목 플루오린 폴리이미드, 리지스트, 애칭가스 Analytical Methods - 전통적인(classical)방법 (화학적방법, 습식 방법) 수용액 속에서 반응을 통해 얼마나 필요한지..농도 예측 할 수 있게됨 1. 정성분석(Qualitative) - 색깔을 본다던지..(불꽃반응, 침전 색깔..), indicators 체크한다던지 boiling poin

원문보기 내부링크
Naver Blog

[2주차] 제2부 재료과학의 세계 - 1.재료의 분류(가)

1. 재료의 분류 1) 재료내의 원자들의 종류, 전자 구조,결합 방식에 따른 분류. (여기서 종류, 전자 구조,결합 방식를 내부구조라 함.) <물질과 재료의 가장 기본적인 구성 요소인 원자들의 전자 구조와 그들간의 결합 방식에 따른 분류> ① 금속재료(metal): 철이나 알루미늄 같은 금속 원소들이 규칙적으로 배열하여 결정 상태의 구조를 이루고 있는 무기 물질 ->금속원소들이 금속 결합 ② 고분자재료(polymer): 주로 탄소나 수소로 결합된 긴 분자사슬로 이루어진 물질 -> 비금속 원소, 공유결합 C H N, O, S -> 고분자 예) 플라스틱, 섬유, 고무 ③ 세라믹재료(ceramic): 금속원소+비금속원소(TiO2)(타이타늄옥사이드) <=이온결합 :　비금속원소 only 흑연(C) <= 공유결합 -> 세라믹 잘 깨짐 재료의 특성에 영향을 주는 요소들 - 원자(원소)의 종류, 전자구조 - 결합 방식(공유, 이온, 금속 결합 등) - 배열(결정-비결정, 결정의 경우, 결정격자)

원문보기 내부링크
Naver Blog

[2주차] 제2부 재료과학의 세계 - 금속결합, 이온결합, 공유결합

1) 금속결합 cf) 전자 – 바다 모델 => 전자가 흐를 수 있는... ① 대표적인 예로서 Na(소듐), Mg, Al의 경우(그림 3 및 4) - 최외각전자(<-자유전자)를 내놓고 양이온이 됨 - 양이온이 전자들 속에 둘러싸여 나열된 구조를 가짐 - 양이온과 전자간의 전기적인 인력(<-금속결합)에 의하여 전체적으로 결합 ② 금속재료의 특성 - 높은 전기 전도성(because 전자는 자유롭게 이동가능)(ex.은, 구리)(경제성 때문에 구리가 더 싸서 구리 씀) - 높은 열 전도성(because 1. 전자들 간의 충돌 빈도 증가, 2. 원자 진동 정도 증가) (1.이유의 영향이 더큼) - 금속 고유의 광택 가짐(because 자유전자 – 낮은 에너지의 빛도 쉽게 흡수) - 연성(선으로 뽑) 및 전성(면으로 펴지는)->소성변형 : 깨지지 않고, 변형 가능 (because 1. 자유전자가 접착제 역할) (becasue 2. p.35쪽 내용(책은 재료과학 (집문당 출판사)를 참고하였습니다.

원문보기 내부링크
Naver Blog

[3주차] 제2부 재료과학의 세계 - 포텐셜 우물

포텐셜 우물을 알아 보기 전에... 3대 재료의 비교 주된 구성원소 결정성(규칙적배열) 또는 비결정성 대표적 예 원자간의 주된 결합 금속 금속원소 결정성 Fe, Al 금속결합 세라믹 금속원소 + 비금속원소 (또는 비금속원소간) 일반적으로 결정성 SiO2, Al2O3 graphene (그래핀) (->이게 모이면 흑연) 이온결합 공유결합 고분자 비금속원소 일반적으로 비결정성 polyethylene (PE) 공유결합 (p.38 밑에서 세 번째 줄)(책은 재료과학(집문당 출판사)를 사용하였습니다.) 실제로는 모든 물질의 결합 성격이 금속, 이온, 공유결합 등과 같이 뚜렷이 구분되는 것은 아니다. 나. 포텐셜우물 : 재료 분류 방법 중 하나 - 역학적 평형: 두 힘이 비기는 상태 - 자연 현상: 주어진 조건 아래서 가장 낮은 에너지 상태로 진행하려는 경향 (안정한 상태의 평형에 이름) 1) 원자간 거리 ① 원자간의 결합에 작용하는 평형의 원리 - 원자간에 작용하는 힘: 인력, 반발력 - 원자

원문보기 내부링크
Naver Blog

[실험 1] 핸드크림 만들기

화장품들에 대한 것을 공부하다보니 '화장품을 그러면 어떻게 만들까?'라는 생각이 들어서 관련 책을 구매하게 되었습니다. 책에 나온 화장품들을 직접 만들어보는 실험을 알아보면 더욱 더 화장품에 대해 가까워지는 경험일 것이라 생각이 들어 관련 내용을 블로그에도 정리해놓으려합니다! 첫 번째 실험은 핸드크림 만들기입니다. 1. 배경 지식 1) 피부 관리 정상적인 피부의 pH : 4.0 약산성 수분함량 : 약 10% 건성 피부 관리 - 팩, 마사지를 통해 영양분 공급, 에센스와 영양 크림을 섞어 마사지 후 흡수하기 지성 피부 관리 - 폼 클렌징을 이용한 세안으로 과도한 피지 제거를 막기 2) 에멀션 : 액체가 다른 액체에 콜로이드 상태로 퍼져있는 용액 cf) 콜로이드? 보통의 분자나 이온보다 크고 지름이 1nm~1000nm 정도의 미립자가 기체 또는 액체 중에 분산된 상태를 콜로이드 상태 cf) 유화액? 콜로이드랑 비슷한 의미지만(우유처럼 액체가 다른 액체에 콜로이드 상태로 퍼져 있는 용액

원문보기 내부링크
Naver Blog

[4주차] 제2부 재료과학의 세계 - 탄성변형, 소성변형, 열 팽창

1. 재료의 강도와 탄성계수 ① 탄성 변형 : 재료를 잡아 당기면 늘어났다가(즉, 원자간의 간격이 커졌다가), 재료를 잡아 당기던 힘을 없애면 다시 원래대로 되돌아 가는 것 ② 소성 변형 : 재료를 잡아 당기면 늘어남. but, 잡아당기는 힘 없애도 되돌아가지 않는 것 (한계 이상으로 가면 소성변형) ③ 탄성 변형과 원자의 포텐셜 에너지의 변화 포텐셜 우물이 좁고 가파를수록 : - 변형을 주기위해 더 큰 힘(더 많은 에너지) 필요 - 잡아 당기면 덜 늘어남(탄성 계수 큼) - 인장 강도 큼 ④ 탄성 계수(Elastic modulus, Young's modulus) - 탄성 영역에서의 기울기 - E값 큼 : 변형 잘 안됨(포텐셜우물이 좁고 가파름) - E값 작음 : 변형 잘 됨(포텐셜우물이 넓고 완만함) ⑤ 인장 강도(tensile strength) 파손이 일어날 때까지 가해준 stress 2. 재료의 열 팽창 ① 대부분의 물체는 온도가 올라가면 팽창 - 온도가 높아질수록 구성 원자의

원문보기 내부링크
Naver Blog

[4주차] 제2부 재료과학의 세계 - 결정 구조(Crystal structure)

결정 상태란? - 주어진 조건에서 가장 낮은 에너지 상태(에너지적으로 가장 안정화된를 갖는 원자 배열 - 주어진 공간에서 기하학적으로 가장 밀집된(close-packed) 원자 배열 - 규칙적이고 질서정연한 배열 1) 격자(Lattice) 격자구조에는 HCP, FCC, BCC를 퐘해서 총 14개의 종류가 있으며, 이들을 Bravais격자라 부른다. ① 조밀육방(HCP: Hexagonal Close Packed) 격자 ->코발트, 마그네슘, 티타늄 아연 등 ② 면심입방(FCC: Face Centered Cubic) 격자 ->알루미늄, 금, 납, 니켈, 백금 등 ③ 체심입방(BCC: Body Centered Cubic) 격자 ->텅스텐, 몰리브텐, 철, 크롬 등 재료과학(집문당 출판사) p.49쪽 그림 HCP와 FCC의 유사점 : 둘 다 총 공간의 74%를 원자가 차지하고 26%는 빈공간 HCP와 FCC의 차이점 : HCP의 격자점을 직선으로 연결하면 육각기둥의 모양이지만 FCC는 입방

원문보기 내부링크
Naver Blog

[5주차] 제2부 재료과학의 세계 - 비결정 구조(비정질구조)(non-crystal)(amorphous)

1. 비결정 구조란? : 원자들이 무질서하게 배열되어 있어서 넓은 범위에 걸쳐 주기적인 반복성이 없는 물질 구조 (규칙성이 없다) 예) 액체 상태의 금속(상온에서는 수은, 갈륨), 유리, 고분자, 비정질 금속 등 (but, 좁은 범위내의 질서는 있을 수 있음) 1) 고체가 비결정 구조를 갖게 되는 이유: ① 냉각 속도가 너무 빨라서 구성 원자나 분자들이 결정구조를 갖추기 위해서 재배열할 만한 충분한 시간적 여유가 없음 ② 분자 구조나 조성이 너무 복잡해서 결정 상태의 배열을 이루기에 용이하지 않을 경우 (->고분자의 설명에 해당. 금속이나 세라믹은 단순함) 2) 비정질 구조의 대표적인 예: ① 소다 유리 - 정사면체(tetrahedra)의 실리카(SiO2)가 무질서하게 배치 - Si-O 결합이 부분적으로 끊어진 자리에 Na+ 이온이 끼어 들어가 있음 ② 플라스틱(<-고분자) : 긴 분자 사슬이 얽히고 꼬인 구조 3) 비정질 상태의 물질은 열 에너지를 주면 결정 상태가 되려는 경향을

원문보기 내부링크
Naver Blog

[6주차] 재료의 결함(1) - 엔트로피

열역학 법칙(엔트로피) ① 자연 현상은 높은 확률 상태쪽(무질서 상태)으로 진행 - 기체의 혼합 - 맑은 물에 잉크 떨어 뜨리기 - 특정 색깔 카드 뽑기 - 카드가 저절로 순서대로 배열될 확률 ② 엔트로피(entropy) 개념의 도입 - 엔트로피: 자연 현상에 있어서 무질서하게 서로 섞이려는 경향을 나타냄 무질서도를 나타내는 상태함수 - 자연 현상은 자발적인 반응의 경우 엔트로피가 증가하는 방향(무질서도가 큰 방향)으로 가려는 경향이 있음 - (포텐셜 에너지 관점) 재료의 결함이 존재하는 이유를 엔트로피의 개념을 사용하여 설명 가능 모든 물질은 비결정 상태보다는 결정 상태로 존재하려 는 경향 가짐 → 그러나, 자연계에서 결함이 없는(무질서도 낮은) 완벽한 결정은 거의 형성되지 않음 ∵ (엔트로피 관점) 자연 현상은 무질서한 상태(엔트로피가 증가하는 방향)로 진행될 확률이 더 높음 if 재료가 내부에 결함들이 전혀 없는 완벽한 결정만으로 이루어져 있다면 세상은 지금에 비해 훨씬 단순해

원문보기 내부링크
Naver Blog

[실험 2] 알로에 스킨 만들기

1. 배경 지식 1) 화장수(Skin Lotion) : 세안료로 피부를 청결하게 한 후 피부 각질층에 수분 및 보습 성분을 부여하는 기초화장품 - 일반적으로 물에 녹지 않는 물질을 가용화하여 열역학적으로 안정화시켜 외관을 투명 액상으로 만든 것. - 마이크로에멀션, 리피드나노스페어 기술을 적용한 투명 or 반투명 화장수, 일정량의 오일 성분을 O/W형으로 유화하여 유상과 수상의 비중 조절하여 저점도 액상에서도 크리밍이나 침강 만들지 않는 불투명 화장수, 수용성 고분자 배합하여 투명하고 점성이 있는 화장수들 有 - 화장수의 기ㅣ본 성분 구성 : 정제수, 에탄올, 보습제 (+ 목적이나 기능에 따라 수렴제, 각질 연화제, 유연제, 계면활성제, 색소, 향료 방부제 등이 첨가됨) 화장수의 종류 청정화장수 가벼운 색소 화장을 지울 때나 화장 전 얼굴 피부를 정돈할 때 사용. 일반 화장수에 비해 세정 효과를 높이기 위해서 계면활성제와 에탄올의 함량이 많음. pH는 염기성. 유연화장수 피부가 거칠

원문보기 내부링크
Naver Blog

기기분석정리(2) - 분석화학, 기기분석의 선택, 빛, (굴절,회절,반사),흡광과 발광

※학교공부를 하며 정리한 노트를 그대로 복붙한거라 가독성은 떨어집니다.※ 분석실험 : sample Sample : representative fraction -analyte -> 분석물질 : 시료중에 분석하려고 하는 물질 - Matrix -> 매질 : 시료에 포함되어 있는 분석물질 이외 물질 - Interference -> 방해물질 : 매질 중 분석에 방해를 하는 물질 대상에 따른 분류(1) - molecular analysis (분자 분석) - atomic analysis (원자 분석) 대상에 따른 분류(2) - 유기분석 (C N O H .. S P) - 무기분석 (금속..) *유기 무기 합친거는 유기금속 분석화학의 분류 1. 분광분석법(mass<- hv) 2. 전기분석 - i=0 일 때: V(전위차 측정) - i>0 일 때: curret?를 측정하기도 하고 전기량을 측정하기도 하고 - (저항) 3. Separation방법 이동상, 고정상이 있는데… 4. 기타 : m/z (를 측정

원문보기 내부링크
Naver Blog

html 기본 태그 모음

여러 번 찾아쓰기 귀찮아서 표로 만들어 둔 것 올립니다! 이 페이지에서 "Ctrl+F" 해서 찾아서 쓰세요 ㅎㅎ &nbsp; 공백 &lt; < &gt; > &amp; & <h1>~<h6></hn> 제목글자태그 (h1이 가장 큼) <h1>제일 큰 제목 크기</h1> <p></p> 본문 글자 태그 <p>이 태그를 이용하면 텍스트 단락을 만들 수 있습니다.</p> 그냥 <p>만 쓰면 <br>과 같은 효과(한 줄 띄기) 그렇다고 <p><p>이렇게 두 번쓴다고 두 줄 띄어지는 건 아님.. <br> 줄바꿈 태그(닫는 태그가 없음) <hr> 수평 줄 태그(닫는 태그가 없음) <b></b> 굵은 글자 <i></i> 기울어진 글자 <small></small> 작은 글자 <big> 큰 글자 <sub></sub> <sup></sup> 윗첨자 아래첨자 <del></del> 가운데 줄이 그어진 글자 <a></a> 앵커 태그 <a href=“파일이름 또는 URL주소”> 문자 또는 이미지 </a> cf) UR

원문보기 내부링크
Naver Blog

[6주차] 재료의 결함(2) - 공극(Vacancy)

공극(Vacancy)이란? (점결합) ① 의미 - 원자가 있어야 할 자리가 비어있는 것 ② 재료내에서의 역할 -> 원자들의 이동(확산 : 원자 또는 분자 수준에서의 이동)을 용이하게 해 줌 - 공극이 전혀 없는 상황에서의 원자의 이동 : 매우 큰 에너지 필요 공극이 있는 상황에서의 원자의 이동 : 적은 에너지 필요 - 공극과 원자의 이동방향은 서로 반대 ③ 온도의 영향: 온도↑ 공극의 수↑ 구성 원자들의 운동 에너지 ↑ ∴ 온도 ↑ 확산의 용이성 ↑ (예: 소결, 열처리 등의 공정에 의한 재료의 합성․제조는 대부분 고온에서 행해짐) ④ 공극 이외의 점 결함 - 치환형 고용체 - 침입형 고용체(ex. 수소저장합금) (예: 이온 결합 결정에서의 결함: 전기적 중성 상태 유지) - 이러한 점 결함의 생성 원인: 재료 제조 공정중 불순물로서 들어가거나 재료 특성 조절을 위 해 일부러 첨가 cf)고용체(solid solution)에서 solution(용액)이란? -> 원자 또는 분자수준에서

원문보기 내부링크
Naver Blog

[6주차] 재료의 결함(2) - 전위(Dislocation)

전위(Dislocation)란? (선결합) ① 의미: 결정내에서 원자면의 일부가 비어있는 것 (또는 새로운 원자면이 부분적으로 끼어 들어가 있는 것) ② 종류: - 인상전위(edge dislocation): 결정내에서 원자면의 일부가 비어있는 것 - 나선전위(screw dislocation): 면이 뒤틀린 것 - 혼합전위(mixed dislocation): 인상+나선 전위 혼합 ③ 재료내에서의 역할 - 작은 힘으로도 재료가 쉽게 변형될 수 있게 함 완벽한 결정: slip plane상의 모든 원자간의 결합의 절단이 동시에 일어나야 하므로 재료의 변형에 큰 힘 필요 결함(전위)이 있는 결정: slip plane상의 전위가 이동함 으로써 변형을 일으킬 수 있으므로 작은 힘으로도 재료의 변형이 가능 (비유: 귀여운 벌레 기어가기, 무거운 멍석 옮기기) ③ 재료내에서의 역할 - 재료의 강도는 낮추지만(불리한 측면) 쉽게 깨지지 않도록 함(유리한 측면) 완벽한 결정: 강도는 높지만(이유: 재료

원문보기 내부링크
Naver Blog

[6주차] 재료의 결함(2) - 결정립계(Grain boundary)

결정립계(Grain boundary)란? (면결합) ① 의미: 작은 단결정(즉, 결정립)들이 모여 다결정체를 이루고 있는 경우 결정립간의 경계 ② 단결정과 다결정의 차이점 - 단결정: 결함이 별로 없는 하나의 커다란 결정체 특징: 투명 예) 수정, 다이아몬드, 루비, 사파이어 - 다결정: 단결정들이 모여서 이루어진 결정 특징: 불투명 예) 대부분의 금속 및 세라믹(알루미늄, 철, 합금, 도자기 등) ③ 결정립계의 구조 - 결정면끼리 단순히 맞닿아 있기만 한 것은 아님 결정면들이 부분적으로 연결되어 어느 정도의 결합력을 가지고 있음 결정립계에 많은 공극들이 존재 ④ 재료내에서의 역할 - 재료를 불투명하게 함(because 결정립계에서의 빛의 산란 때문) - 재료내에서 균열의 전파나 전위의 움직임을 방해 결정립의 크기가 작을수록(결정립계 면적이 클수록) 전위의 이동에 대한 방해면이 많아 재료의 강도가 일반적으로 증가 - 공극들의 존재로 원자 확산이 결정립내에서보다 빠름 - 입계를 따라

원문보기 내부링크
Naver Blog

[6주차] 재료의 결함(2) - 기공(Pore)

기공(Pore)이란? 체결합 ① 의미: 재료내에서 수십-수만개의 원자들이 한꺼번에 빠져나간 빈 자리 비교) 공극 진공 상태 또는 기체가 차있는 상태 ② 형성: - 공극들이 모여서 형성 - 재료 제조시 외부로부터 혼입 기포의 잔류 분말들 사이의 빈 공간이 잔류 ③ 재료내에서의 역할: (재료에 불리한 경우) - 균열의 전파를 쉽게 해줌 - 전자의 흐름을 산란시킴: 전기 전도도 감소 - 빛의 흐름을 산란시킴: 불투명 (재료에 유리한 경우) - 원자력 발전의 원료인 UO2의 경우 - 전기절연성 향상 - 열린 기공의 경우 촉매 재료, filter 재료로 쓰임 ④ 종류: - 닫힌 기공(closed pore): 서로 연결x, 독립적으로 존재 - 열린 기공(open pore): 서로 연결 o, 표면까지 터널을 이루고 있음(ex. 촉매재료, filter) ⑤ 기공 이외의 3차원적 결함 : 함유물(inclusions) - 기공에 기체 외에 무언가 차 있는 것 ex) 금속 : 산화물, 황화물... ※아

원문보기 내부링크
Naver Blog

기기분석정리(3) - 분광기기의 요소,UV-VIS spectrophotometer Theory, HOMO와 LUMO, 선택률 등

※학교공부를 하며 정리한 노트를 그대로 복붙한거라 가독성은 떨어집니다.※ <분광기기(Instruments for optical Spectroscopy)> 5가지 1.안정한 광원 2.투명한 용기 3.분광장치(단색화장치) 4.검출기 5.계기(signal process and readout)(->computer based) <source의 조건(ideal한, classify)> -Intensity가 높을 수록 좋다 (detection limit(검출한계)를 향상(낮게하는)시킬 수 있기 때문에) (but, 너무 세면 시료의 손상&(원하지않는)부반응(photoreaction)) -Spectral output *range : 원하는 파장의 빛(uv,vis..) *homogeneity(파장 별로) -안정성(stability)(time에 관한) *Short time(fluctuation) *long term(drift) -수명(Life time)이 오래되면 좋음 <source의 분류(classif

원문보기 내부링크
Naver Blog

기기분석정리(4) - 연속변화법, 몰비법, 기울기법, Instruments for optical spectroscopy 등

※학교공부를 하며 정리한 노트를 그대로 복붙한거라 가독성은 떨어집니다.※ Metal하고 리간드하고 몇대몇으로 반응하는지 알아보는 방법 (M + nL = ML아래첨자n) 1.연속변화법(Continuous-variation method)(Job’s method) M농도 + L농도 = 1로 맞춤. 비율을 연속으로 변화시킴 2.몰비법(Mole-ratio method) M농도를 고정 L농도를 조절 3.기울기법(Slope-ratio method) M농도 고정 하고 L농도 변화 L농도 고정 하고 M농도 변화 한다음 slope. 그러면 몇 대 몇으로 반응하는지 알 수 있음 —- 장점들 1.wide applicability(넓은 적용가능성) -정성분석 -특히 정량 분석에서도 굉장히 많은 것을 할 수 있다. (mixture analysis, control of purity, …) -Chemical reactions 2.높은 감도 3.높은 선택성 4.정확도 좋음 5.쉽고 편리 5.안비쌈 7.컴퓨터컨트롤

원문보기 내부링크
Naver Blog

[실험 3] 레몬 스킨 만들기

1. 배경 지식 1) 레몬 - vit C, 칼슘, 구연산 등이 풍부하게 함유 -> 피부 회복&미백에 뛰어난 효능 2. 실험 1) 실험 재료 1. 레몬 E.O(←기능성 부여제) - 레몬껍질을 저온 압축하여 make - 비독성 정화 촉진제 - vit C 함유 -> 미백 효과 good 2. 올리브 리퀴드(← 계면활성제) - 오일성분을 워터류에 첨가하여 가용화시키는 원료 - 사용비율이 높아지면 피부 자극, 건조한 사용감 -> 건조, 민감 피부에는 사용량 제한 필요 3. 자몽추출물(←방부제(세균 증식 억제)) - 자몽씨로부터 추출한 천연 방부제 (소량 약 전체의 0.5%정도만 첨가해도 제품 본래 보존기간 보다 약 두 배 정도 증가 시킴) - 살균, 소독, 방부제 -> 박테리아나 세균 감염에 내복약으로 사용 -> 상처나 중이염, 인후염 등 외용약으로 사용 4. vit E(토코페롤)(←피부 컨디셔닝제) - 세포 노화 막고, 세포막 유지 - 활성산소 무력화시키는 황산화물질 포함 - 미백, 항산화,

원문보기 내부링크
Naver Blog

[실험 4] 허브 향수 만들기

1. 배경 지식 1) 향수의 원리 - 향수를 뿌리면 향수의 향은 공기 분자를 타고 전체로 확산. 이때 에탄올은 기화되어 날아그는데 이와같이 향은 공기 분자를 타고 퍼짐. - 공기 분자는 뜨거운 온도에서 활발히 운동하며 빠르게 냄새를 확산시킴 향수는 착향제가 주체인 화장품입니다. 제품 내 착향제의 함유랑(부향률)에 따라 퍼퓸, 오드퍼퓸, 오드뚜왈렛, 오드코롱(오드콜로뉴), 샤워코롱(샤워콜로뉴)으로 분류됩니다. 그리고 향수는 착향제의 휘발성때문에 뿌리고 시간이 지난 후 향이 변화합니다. 향이 나는 시간대에 ㄸ라 탑노트, 미들 노트, 라스팅 노트로 구별합니다. 참고) 향수 외에 다른 화장품의 종류는 아래의 게시물에 정리해놓았습니다! https://blog.naver.com/cleveryellowduck/222486782282 화장품의 유형 완전 기초지만! 모르면 안되는 필수개념이라서 작성합니다! 총 13가지 유형이 있습니다 ୧( “̮ )୨ 1. ... blog.naver.com 2. 실험

원문보기 내부링크
Naver Blog

기기분석정리(5) - 발색단, 조색단, 하이퍼크로믹, 하이포크로믹, red shift, blue shift, Lambert-Beer’s Law, 2파장 분광법 등

※학교공부를 하며 정리한 노트를 그대로 복붙한거라 가독성은 떨어집니다.※ Molecule Orbital(MO)->MO로 전자전이가 일어날 때 제일 많이 되는 것은 HOMO->LUMO로(가장 많은 전자전이의 흡광에 해당) 발색단 C=C-에틸렌기 : 파이-파이* , C=O케톤기, N=N아조기 : n->파이* , NO2니트로기, NO니트로소기 : n->시그마* 조색단 -OH, NH2기 자체로는 흡광 없음 호모를 높게 또는 낮게 올릴수도 혹은 루모를. 가까워지게해서 파장이 길어지게 하거나(red shift) 멀어지게해서 짧은 파장이 흡수되게 하거나(blue shift) 확률이 커지는경우 하이퍼크로믹 확률 감소 하이포크로믹 ——- 원자에서의 전자전이(electronic transitions) : 원자 흡광(Atomic Absorption) 1.AO(atomic orbital)->AO 2.charge-transfer (O(occupied)AO->u(unoccupied)MO, OMO->uAO)

원문보기 내부링크
Naver Blog

기기분석정리(6) - 프리즘,회절판,검출기(PV,PT,PMT,CCD),Luminescence,fluorescence 등

※학교공부를 하며 정리한 노트를 그대로 복붙한거라 가독성은 떨어집니다.※ <Wavelength selector> *Prism(프리즘) :파장짧을수록, 매질 촘촘할수록 속도가 느려지는 경향이 있다. : non linear dispersion *Grating(회절판) : 회절을 이용해서 분산시키는 방법 : linear dispersion d가 작을수록 resolution이 좋아짐 -UV-vis: 300~2000 groove/mm 보통 1200~1400이 일반적 IR : 10~200groove/mm, 100정도가 적절 incident angle : 입사각 reflection angle : 반사각 원하는 파장을 순서대로 볼 수 있게 되는 데 이를 scan이라 얘기함 R=mN R : resolution m : Spectral order N : Number of grating grooves 10^-9m = 1nm —— 단색화 장치의 조건 • 띠폭이 좁아야만 서로 인접된 흡수띠의 분해가 가능 •

원문보기 내부링크
Naver Blog

[공유] [삶의 질을 높인다] 화장품시장 : 화장품 ˙나노시대˙ 열렸다

<나노전달 물질을 이용한 화장품 제조공정관련 기사> 수입 화장품을 비롯 국내 대기업 위주의 화장품이 대부분을 차지하는 화장품 업계에서 독자적인 기술력으로 급성장하고 있는 업체가 있어 업계의 관심을 끌고 있다. 나노기술(Nanotechnology.)과 피부과학의 결합을 통해 특허를 보유하고 있는(주)맑은하루(www.finedays.co.kr)가 바로 그곳. '본연의 아름다움을 되찾자(Return to the Nature)'라는 슬로건 아래 2003년 새롭게 화장품 사업에 진출한맑은하루는 명실상부 고기능성 화장품 선두 회사다. 더욱이 2007년을 정점으로 세계적인 종합 화장품 브랜드를 지향하며, 화장품을시작으로 생활용품 전체로 사업을 확장시켜 세계 무대 진출을 꾀하고 있다. 특히 맑은하루에서는 나노전달 물질을 이용한 화장품 제조공정으로 은이온 화장수를 개발해 독보적인 기술력을 자랑한다. 이를 통해 이 회사는 마스크팩 제품으로 나노실 브라이트닝 프로젝트(NanosilBrightening

원문보기 내부링크
Naver Blog

[실험 5] 샴푸 만들기

1. 배경 지식 1) 머리카락 - 케라틴 단백질로 이루어져 있음(케라틴 단백질은 폴리펩타이드로 이루어져 있음) - 모간과 모낭으로 구성 - 모피질, 모수질, 모표피 - 머리카락 구조는 시스테인(아미노산) 양에 의해 결정 cf)시스테인은 20개의 기본 아미노산 중에서 유일하게 싸이올기(-SH)포함 cf) 시스테인 분자식 : C3H7NO2S 출처 : 화학물질 구조사전 - 머리카락은 이황화 결합(두 개의 황 원소 사이의 단일 결합(S-S))을 통해 머리카락의 딱딱한 정도를 결정 - 머리카락의 섬유 강도는 약산성일 때 가장 크며 pH가 4~6일 떄 가장 좋다. (하지만, 기존 판매되는 샴푸의 pH는 대부분 10이상의 염기성 -> 사용 시 모발이 점점 약해짐) -> 샴푸란? : 머리카락을 씻기 위해 쓰는 세척제(머리카락과 두피를 깨끗이 하는 기름의 작은 방울로서 세제의 일종) 2) 샴푸의 원리 물(-)과 기름(+)을 섞으려해도 섞이지 않고 그 사이에 경계가 생기는데 이를 꼐면이라고 한다. 이

원문보기 내부링크
Naver Blog

[실험 6] 바디워시 만들기

1. 배경 지식 1) 바디워시(바디클렌저) : 샤워를 할 때 피부의 보습을 유지하면서(<-비누와의 차이점: 보습성분이 함유) 깨끗이 씻어내도록 도와주는 세정제품으로, 샤워용 타월 등에 적당량을 덜어서 충분히 거품을 내어 부드럽게 마사지 한 후 씻어내는 방식으로 사용된다. 샤워를 할 때 온몸의 노폐물이 깨끗이 제거되도록 도와준다. 세정 후 건조함이 강한 비누와 달리, 피부 보습막을 유지시키면서 자극 없이 세정되도록 하는 것이 특징이다. - 바디워시의 성분은 인체에 맞는 pH cf)정제수, 라우릴글루코사이드, 데실글루코사이드 등이 주성분이고, 제품마다 쌀, 당근, 녹차 등 다양한 천연 추출물이 함유되어 있다. 또한 시트러스, 딸기, 감귤, 레몬 등의 다양한 향료를 첨가해 기호에 따라 달콤하거나 상쾌하거나 시원한 향을 낸다. 2) 미셀 구조와 기름 때가 제거되는 원리 물에 잘 녹는 친수성기와 물에 잘 녹지 않는 소수성기를 동시에 갖고 있는 양친매성(amphipathic) 분자를 계면활성제

원문보기 내부링크
Naver Blog

[실험 7] 립글로스 만들기

1. 배경 지식 1) 입술 - 수분이 증발하여 건조해지기 쉬움 -> 보습을 충분히 해주어야함 2) 립글로스 입술에 윤기를 주는 화장품, 건조한 입술을 보호하는 기능을 한다. 립글로스의 원리? : 기름 성분(비극성)이 물 성분(극성)의 증발을 막아주는 보호막 작용 2. 실험 1) 실험 재료 1. 밀랍(비즈왁스) 벌집의 주성분. 꿀을 채취한 뒤 남은 벌집 찌꺼기에 열을 가해 눌러 짜내거나 다른 약품으로 녹여 얻는다. 표백한 것-> 화이트 왁스 표백하지 않은 것 -> 옐로우 왁스 - 피부에 코팅막을 형성하여 피부가 수분을 빼앗기지 않고 건조하지 않게 도와줌. - 화학 방부제를 사용하지 않는 화장품의 천연 식물 제품 연정화 용도로도 사용됨. 2. 올리브 오일 3. 향료 2) 실험 방법 ① 은박 컵에 밀랍 2g을 넣고 중탕을 하여 녹여준다. ② 밀랍이 녹으면 올리브 오일 10mL를 넣고 젓는다. ③ 마지막으로 액체 상태의 용액에 향료를 몇 방울 넣고 잘 섞이도록 젓는다. ④ 완성된 액체를 용

원문보기 내부링크
Naver Blog

[실험 8] 고체 향수 만들기

1. 배경 지식 1) 향수의 원리 - 향수를 뿌리면 향수의 향은 공기 분자를 타고 전체로 확산. 이때 에탄올은 기화되어 날아그는데 이와같이 향은 공기 분자를 타고 퍼짐. - 공기 분자는 뜨거운 온도에서 활발히 운동하며 빠르게 냄새를 확산시킴 향수는 착향제가 주체인 화장품입니다. 제품 내 착향제의 함유랑(부향률)에 따라 퍼퓸, 오드퍼퓸, 오드뚜왈렛, 오드코롱(오드콜로뉴), 샤워코롱(샤워콜로뉴)으로 분류됩니다. 그리고 향수는 착향제의 휘발성때문에 뿌리고 시간이 지난 후 향이 변화합니다. 향이 나는 시간대에 ㄸ라 탑노트, 미들 노트, 라스팅 노트로 구별합니다. 참고) 향수 외에 다른 화장품의 종류는 아래의 게시물에 정리해놓았습니다! https://blog.naver.com/cleveryellowduck/222486782282 화장품의 유형 완전 기초지만! 모르면 안되는 필수개념이라서 작성합니다! 총 13가지 유형이 있습니다 ୧( “̮ )୨ 1. ... blog.naver.com 2. 실험

원문보기 내부링크
Naver Blog

[실험 9] 모이스처라이징 로션바 만들기

1. 배경 지식 1) 피부 - 피부의 표면은 기본적으로 죽은 세포들로 이루어져 있고, 아래츠으이 피부 세포를 보호하는 역할. -> 표면층은 수분(유분)을 지니고 있어야! 2) 모이스처라이징 로션바 피부 : for 수분 유지, 자연적으로 유분 분비&외부의 자극물이 피부 속으로 침투하지 못하게 함. but, 외부에서 접하게 되는 물리, 화학적 유해 물질과 지속적인 세정제 사용이 피부 표면층의 보호막(유분)을 제거. -> 피부 보호위해 피부 보호제 필요 (이번 실험에서는 실험에 사용될 여러 성분으로부터 외부의 자극으로부터 피부 보호 가능한 모이스처라이징 로션바 제작) 2. 실험 1) 실험 재료 1. 밀랍(비즈왁스) 벌집의 주성분. 꿀을 채취한 뒤 남은 벌집 찌꺼기에 열을 가해 눌러 짜내거나 다른 약품으로 녹여 얻는다. 표백한 것-> 화이트 왁스 표백하지 않은 것 -> 옐로우 왁스 - 피부에 코팅막을 형성하여 피부가 수분을 빼앗기지 않고 건조하지 않게 도와줌. - 화학 방부제를 사용하지 않

원문보기 내부링크
Naver Blog

[실험 10] 천연 EM비누 만들기

1. 배경 지식 1) 비누 : 때를 빼거나 씻어 낼 때 쓰는 세정제(보통 고급 지방산의 알칼리 금속염을 주성분으로 함) 2) 비누의 세정 작용 지방이나 기름의 비누화 반응을 통해 얻은 지방산염은 물과 친화성이 적은 소수성 알킬기가 친화력이 있는 친수성 카복실 음이온 염에 길게 연결되어 있다. 이들은 친수성과 소수성 성질을 동시에 가지고 있어 성질이 다른 두 물질이 맞닿는 경계면에 잘 달라붙어서 표면 장력을 많이 감소시키는 계면활성제 역할을 할 수 있다. 이들이 물에 섞이면 친수성은 물과 접촉하는 방향인 바깥쪽으로 소수성 부분은 안쪽으로 배열되는 마이셀(micelle)을 형성하게 된다. 이렇게 생성된 마이셀의 안쪽으로 때와 같은 소수성 물질이 녹아 들어가 세정 작용을 하게 된다. [네이버 지식백과] 비누화 반응 [saponification] (화학백과) 2. 실험 1) 실험 재료 1. EM 원액 : Effective Micro-organisms(유용 미생물군)의 약자. 일본 류큐 대학

원문보기 내부링크
Naver Blog

[실험 11] 선스틱 만들기

오늘은 기능성 화장품 중 하나인 자외선 차단에 도움을 주는 선스틱을 만들어보겠습니다! 1. 배경 지식 1) 자외선 차단의 원리 산화 타이타늄(티타늄디옥사이드)은 보호막 형성하여 자외선 차단 효과가 톺고 땀나는 걸 억제하여 피부에 투명감을 줌. 산화 아연(징크옥사이드)는 독성이 없고, 산과 염기에 녹으며 햇빛이나 다른 자극으로부터 보호막을 형성, 방부 빛 향균 작용. 2. 실험 1) 실험 재료 1. 산화 타이타늄(티타늄디옥사이드)(TiO2) 티타늄디옥사이드는 땅에서 캐낸 다음 추가 공정을 거쳐서 소비자 제품에 사용하기 위해 정제되는 자연적으로 발생하는 광물입니다. 티타늄 (IV)옥사이드 또는 티타니아로도 알려져 있으며, 금속 티타늄 (외부 링크)과 산소로 구성된 자연 발생 화합물입니다. 티타늄디옥사이드는 도료, 식품, 의약품 및 화장품에 이르기까지 많은 제품에서 안전하게 사용됩니다. 또한 태양 광선의 유해한 자외선으로부터 피부를 보호하는 방법으로 일부 자외선 차단 제품에서 중요한 역할

원문보기 내부링크
Naver Blog

[실험 12] 아이브로우 펜슬 만들기

1. 배경 지식 1) 아이브로우 펜슬 - 눈썹연필이라고도 한다. - 빛깔은 갈색 ·청색 ·검정 등이 있다. - 눈썹을 그릴 때는 일직선으로 그리지 말고 짤막짤막하게 눈썹 하나하나를 칠하듯이 그리며, 다 그리고 나면 눈썹솔로 전체를 엷게 칠한다. 눈썹 연필은 피마자유, 라놀린 등에 뜬숯 상태의 것을 섞어서 만들기 때문에, 그대로 사용하면 눈썹에 필요한 지방분을 빼앗겨 눈썹이 빠지게 되는 원인이 되므로, 아이브라우 펜슬을 사용하기 전에 중성 크림을 엷게 바르고 사용하는 것이 효과적이다. [네이버 지식백과] 아이브로우 펜슬 [eyebrow pencil] (두산백과) 2. 실험 1) 실험 재료 1. 유동 파라핀(←윤활성) - 석유에서 추출하는 오일 - 주성분은 알케인과 파라핀 - 액상 파라핀, 바셀린유, 화이트유라고불림, 원유를 정재할 때 나오는 부산물을 재 정재해서 얻어지며 ‘미네랄 오일’이라고도 불림. - 이 성분은 특히 정제가 쉽다는 점과 색과 향이 없고 저렴한 가격을 이유로 널리 사

원문보기 내부링크
Naver Blog

[실험 13] 각질 제거젤 만들기

1. 배경 지식 1) 각질 : 파충류 이상의 척추동물의 표피 부분을 이루는 경단백질로 이루어진 물질. 케라틴 성분으로, 동물의 몸을 보호하는 비늘, 털, 뿔, 부리, 손톱 따위에 많이 포함되어 있다. 2) 각질 제거젤 : 피부 각질과 노폐물, 피지를 제거하기 위해 세안 시 사용되는 제품 3) 각질제거 종류 ① 물리적 각질 제거 : 세안 후 물기를 닦은 뒤 도포하여 부드럽게 롤릴하여 마사지 후 씻어내는 방식. 각질 쉽게 제거 가능 but, 피부에 자극이 감. ② 화학적 각질 제거 : 피부의 박리를 유도하며 진피와 표피의 세포 재생을 촉진하고 피부 탄력 증가시킴. AHA는 수용성, BHA는 지용성으로 산 성분으로 각질을 녹임. 물리적 각질 제거보다 저자극 but, 즉각적인 효과 보기 어려움. 2. 실험 1) 실험 재료 1. 알로에 모이스트(←수분 밸런스 조절, 노화 예방, 상처 치유) - 알로에 모이스트(베라젤)은 높은 점성의 투명 수용성 젤 - 피부 진정 효과 - 수용체 다당체 성분이

원문보기 내부링크
Naver Blog

[실험 14] 클렌징 밤 만들기

1. 배경 지식 1) 클렌징밤 : 유성 성분의 화장을 지우는 세안제로 화장품 등의 각종 노폐물을 흡착하여 녹여낸다. 보습 성분들이 피부장벽을 만들어 피부 촉촉하게 유지해줌 -> 건성피부에게 good 2. 실험 1) 실험 재료 1. 올리브 퓨어 오일(←보습제) - 올리브 열매에서 채취한 오일 - 올레인산이 많이 들어 ㅣㅇㅆ어 보습 효과 뛰어남 -> 비누의 고급 지방산 오일로 오래전부터 사용 - 올리브 오일의 정제와 압착 정도에 따라 엑스트라 버진, 버진, 퓨어, 포마스의 세 등급 - 퓨어 올리브 오일 : 엑스트라 버진을 짜고 남은 올리브유를 더 눌러서 남아 있는 기름을 한 번 더 짜낸 것.(엑스트라 버진보다는 불순물이 조금 더 들어 있는 편이지만 식용 사용 가능) - 비타민 E와 프로비타민 함유 -> 피부노화 막고 노폐물과 독소 배출 2. 밀랍(←고형화제) 벌집의 주성분. 꿀을 채취한 뒤 남은 벌집 찌꺼기에 열을 가해 눌러 짜내거나 다른 약품으로 녹여 얻는다. 표백한 것-> 화이트 왁

원문보기 내부링크
Naver Blog

[실험 15] 피지조절 워시오프팩 만들기

1. 배경 지식 1) 워시오프팩 : 팩을 바르고 일정 시간 후 물로 씻어내는 팩이다. 2. 실험 1) 실험 재료 1. 정제수 2. 알로에가루 - 피부진정 - 영양 - 탄력 - 항산화제 3. 카올린 클레이(←피지흡착) - 실리카를 주성분으로 한 점토질의 물질 - 철, 칼슘, 마그네슘, 포타슘, 아연 등의 미네랄 성분을 포함하고 있음. - 햇빛에 자연 건조하여 미네랄을 활성화시킬 수 있음. 4. 옥수수 가루 5. 자몽추출물(←방부제) - 자몽씨로부터 추출한 천연 방부제 (소량 약 전체의 0.5%정도만 첨가해도 제품 본래 보존기간 보다 약 두 배 정도 증가 시킴) - 살균, 소독, 방부제 -> 박테리아나 세균 감염에 내복약으로 사용 -> 상처나 중이염, 인후염 등 외용약으로 사용 6. 티트리 에센셜오일(←피지조절) - 여드름에 good - 피부 진정에 good - 비듬이나 발진등에 효과 좋음 7. 글리세린(←보습제) - 글리세롤이라고도 불림 - 무색 무취 - 공기의 수분 흡수 -> 보습력

원문보기 내부링크
Naver Blog

[실험 16] 피부진정 스킨 만들기

1. 배경 지식 1) 피부진정 스킨 : 비누 세안으로 인해 높아진 피부의 pH를 정상적으로 돌아오게 하고 피부결을 정돈시켜 준다. 2. 실험 1) 실험 재료 1. 정제수 2. 올리브 리퀴드(←가용화제) - 오일성분을 워터류에 첨가하여 가용화시키는 원료 - 사용비율이 높아지면 피부 자극, 건조한 사용감 -> 건조, 민감 피부에는 사용량 제한 필요 3. 프로폴리스 - 항염, 항산화, 면역력 증가에 good - 프로폴리스 구성 성분 중 플라보노이드는 활성산소를 없애 항산화 효과가 있다. (+항균 작용) - 프로폴리스 구성 성분 중 케르세틴은 항암 효과를 나타내기 때문에 암세포 유전자가 복제되기 전에 차단한다. 4. 자몽추출물(←방부제) - 자몽씨로부터 추출한 천연 방부제 (소량 약 전체의 0.5%정도만 첨가해도 제품 본래 보존기간 보다 약 두 배 정도 증가 시킴) - 살균, 소독, 방부제 -> 박테리아나 세균 감염에 내복약으로 사용 -> 상처나 중이염, 인후염 등 외용약으로 사용 5. 글

원문보기 내부링크
Naver Blog

[실험 17] 수분크림 만들기

1. 배경 지식 1) 수분크림 : 피부에 수분을 보충하기 위해 사용하는 화장품. 크림의 형태를 하고 있으면서도 기름기가 거의 없고 수분 함량이 높은 것이 특징이다. 2. 실험 1) 실험 재료 1. 알로에 모이스트 - 알로에 모이스트(베라젤)은 높은 점성의 투명 수용성 젤 - 피부 진정 효과 - 수용체 다당체 성분이 풍부 -> 보습제 기능 - 뛰어난 멜라닌 색소 형성 억제 효과 -> 기미, 주근깨 감소 등 화이트닝 효과 - 사과산 등 유기산 함유 -> 콜라젠 생성 촉진, 피부 건조로 인한 잔주름 예방, 피부 탄력 증가 - 알로에친 성분은 세균과 곰팡이에 살균력 있음. - 머리 가려움 증, 비듬 발생 개선, 탈모 예방 - 천연화장품 만들 때 일반적으로 크림/로션에 1~10퍼, 미백 에센스에 10~20퍼, 수분젤 크림에 30~40퍼, 천연 샴푸에 1~5퍼가 첨가됨. 2. 아카시아 콜라젠(←진정, 항염) - 식물성 콜라젠 성분 - 생체 보호, 지지 - 피부 결합 조직 활성화, 피부 노화 방

원문보기 내부링크
Naver Blog

[실험 18] 아토크림 만들기

1. 배경 지식 1) 아토크림 : 지방유나 유랍 중의 하나와 물을 유화제로 유화시켜 원료와 전혀 다른 품질형체로 만든 제품의 총칭. - 로션보다 점성이 높음 - 피부를 보호, 영양 공급 - 자극에 민한 피부를 부드럽게 가꾸어줌 2. 실험 1) 실험 재료 1. 정제수 2. 호호바 오일(←피부보호, 살균작용) - 호호바는 미국 캘리포니아, 멕시코 남부 지방에서 자생하는 열매로, 호호바 오일은 이 열매의 씨를 압착해 추출한 것. - 오일이라는 이름이 붙었지만, 일반적인 식물성 오일과는 다른 액상 왁스 형태로 사람의 피지 성분과 유사한 분자구조 가짐 - (by국제분자과학 학회지) 지루성 피부염, 여드름, 습진, 피부 노화에 효과 있음 - 여드름과 피부트러블에 좋은 효능 -> 사람의 피지와 가장 비슷한 구조의 오일로, 바르게 되면 피부가 이미 피지의 과다분비로 인해 생길 수 있는 여드름과 같은 피부 트러블을 억제&모공 확장 막아 노폐물 배출 - 여드름에 의한 흉터 및 염증 치료에 효과적 3.

원문보기 내부링크
Naver Blog

[쿠키런킹덤] 트위즐젤리맛 쿠키, 마라맛 쿠키, 펌킨파이맛 쿠키, (+쿠키런킹덤 쿠폰)

맨날 블로그에 학문적인(?)이야기만 쓰다가 일기를 써보려고 한다 ㅎㅎ 내가 쉴 때마다 하는!! 쿠키런 킹덤을 첫 글으로!!ㅎㅎ 최근에 나온 쿠키들 세 개 뽑는 영상 먼저 업로드!! 모두 뽑았다!!! (영상은 몇 주전 영상 ㅎㅎ) 트위즐젤리맛 쿠키 토핑은 아래의 조합이 좋다고 한다!!(아직 사용 잘 안해서 라즈베리 대충 넣어놨당 히히) 라즈베리5개 or 애플젤리5개 or 라즈베리 3개+애플젤리2개 그 다음으로 마라맛 쿠키 토핑은 아래의 조합이 좋다고 한다!! 초콜릿칩5개 마지막으로 펌킨파이맛 쿠키는...! 두구두구 아몬드5개 바로 아몬드 5개 조합!! 피피는 스킨 안껴도 귀여워... 성능도 조아...너 체고야....(하트) 그리고 완전 좋았던 마스터3으로 홀리베리 시즌1을 마쳤다 히히(•ᴗ•) *。 내가 마스터3이라니 ㅎ.ㅎ 젤 좋은 보상!!! 아 그리고 오늘 공지보니까 쿠키런 킹덤 글로벌 누적 3천만!!왕국을 돌파했다고해서 쿠폰이 나왔길래 받았다!! 안받은 사람 모두 받으세요!!!!

원문보기 내부링크
Naver Blog

[홍대데이트] 오레노라멘, 산리오러버스클럽, cbd카페(커피벌스데이), 아이엠어버거 등

휴가 나온 구닌이랑!! 데이트를 해따 히히히>_< 완전 철저한 계획을 세우고 갔다!!vV（＾ｖ＾）Vv 우리의 목적은 간단했다.............. 바로바로!!! 맛난거 마니마니 먹고 피규어 구경을 해보자!!!!!!!! + 내 사랑 시나모롤도 보러가기 ლ(ლ) (사실 피규어 구경가면 아는게 짱구랑 도라에몽, 진격의 거인, 포켓몬, 커비..?...?정도 밖에 없음 헤헷...그래도 몬가 아는척하려고 가씀...!!!) 두근두근..!! 아래는 남자친구가 정리해놨던 것!!! 1. 오레노 라멘 먼저..!! 우리는 배가 고팠기 때문에 무려 미슐랭...맛집..?인 오레노 라멘을 먹으러 갔다!!! 줄이 짧아서 곰방 들어가서 행복했다는 점>_< 메뉴도 이렇게 다양하게 있었는데..! 사실 뭔지 몰라서 구냥 유명한거 같은...이름 멋진거 두 개 골랐당 토리 ㅃ이탄 라멘하고 카라 빠이탄 라멘!! 빠이탄은 먼가 빠이튕~~~~넘처보여서 고름 키키키키키 >_< (근데 존맛탱!!!!!!!!미쵸쏘!!!!!!୧୨)

원문보기 내부링크
Naver Blog

[공유] 비누화 반응

화학백과 비누화 반응 [ saponification ] 비누화 반응은 에스터 작용기를 NaOH나 KOH와 같이 –OH를 포함한 염기성 용액과 반응시켜 카복실산 염과 알코올을 생성하는 반응이다. 동물성 지방이나 식물성 기름의 비누화 반응에서는 지방산의 Na+ 염(또는 K+ 염)인 비누가 생성된다. 보통 비누는 소듐 염이지만 포타슘 또는 기타의 금속 이온을 포함한 특수한 용도의 비누도 있다. R-COO-R' + MOH → R-COO-M+ + R'OH (M은 금속을 의미하고, Na, K, Ca, Li 등이 될 수 있음) 목차 1.에스터 분해 메커니즘 2.비누의 제조 과정 3.비누화 값 (saponification value) 4.비누의 세정 작용 5.비누화 작용의 응용 5.1.강염기 및 지방 종류에 따른 연질 비누와 경질 비누 제조 5.2.리튬 비누 5.3.소화기 6.비누와 합성 세제와의 차이점 에스터 분해 메커니즘 에스터를 분해하여 카복실산과 알코올을 생성하는 과정은 산을 촉매로 사용하

원문보기 내부링크
Naver Blog

[문래역 셀프사진관] 파인딩더블유(findingw)

같이 수험생활을 했던 친구와 만나서 추억을 쌓으려구 문래역에 있는 셀프사진관 파인딩더블유에 방문해따o((*^^*))o "촬영+사진 셀렉 + 보정"까지 1시간이나 주시는.... 엄청난 곳.... (다른 셀프사진관은 진짜 시간 너무 짧아서 으아아앙 이런 느낌인데 대박이여똬...) 친구랑 셀카만 찍어봤어서 사진관간다고 하니 두근두근...!!!! 아래처럼 예약 완료!!!!! (^O^) 예약 하는 법!! 예약은 필.수 (우리는 예약 성공했돠 음하하) 예약까지 마치고 말랑콩닥한 심장을 부여잡고 예약일까지 숨을 참..았...다...!!!!!!!흡...... 드뎌 예약 당일!! 문래역으로 쓩==≡≡ΣΣ(っ´｀)っ 파인딩더블유 도착!!!! 간판 포착!!! 파인딩더블유 입구 '간판이랑 문 이쁘다....'라는 생각이 들었지만 빨뤼빨뤼 바로 입장!!!! 시간이 없숴!! 가게 내려가는 중 찍은 사진들 여기 분위기 무슨 일..... 거울 + 우리 얼굴이 보이는 티비 + 세상귀욤 강쥐 콤보 세트.... (사장

원문보기 내부링크
Naver Blog

[요리] 콩비지찌개

때는 11월 26일... 콩비지찌개를 해먹고 싶은 날이였다...!! 하지만, 한 번도 해보지 않았기에... 엄마에게 전화를 걸어 레시피를 알아냈다!! 뚜뚠 레시피 전화하면서 급하게 적어서 오타가... ㅎ.ㅎ 이거슨 재료 설명인가 레시피인가..(?) (사실 막 적어서 이상한 부분도 있음) 알아서 잘 대~~충 만들어보면 되것지 라는 생각에 재료 사와서 만들기 시작!!!੭)੭⁾⁾ 따라하고 싶은 사람은 위에 메모장말고 밑에 레시피를 봐쥬세요 히히(하트) 1. 찌개용 고기 넣기(with 들기름, 마늘) 먹고 싶은 만큼!! 고기를 넣고 찹찹!! 찌개용 돼지고기랑 들기름을 넣고 볶볶~.~ 어느정도 볶고 나서 마늘을 넣고 다시 볶볶!! 버터같지만 다진 마늘입니돠(집에 소분해놓은 다진 마늘 대애충 저정도 넣었습니당ㅎ,ㅎ) 이때부터 갑자기 배고픔...지수 up... 냄새 미춌... 아무튼 이렇게 열심히 볶아줬ㄷ ㅏ!! 쌀뜨물 넣기 다 볶아줬으면 쌀뜨물을 넣어주면 되는데,,, 없어서 그냥 물을 넣어줬다

원문보기 내부링크
Naver Blog

[Day 6,7] 폼과 관련된 태그들(HTML의 다양한 태그들 - 5)

1. 폼 태그 : <form> 태그 <form [속성="속성값"]> 여러 폼 요소 </form> form 태그 속성 - method : 사용자가 입력한 내용을 서버 쪽 프로그램으로 어떻게 넘겨줄 것인지에 대한 속성. (get/post 사용가능) (get : 데이터를 256~4096byte까지만 서버로 넘김, 단점 : 사용자가 입력한 내용이 그대로 드러남) (post : 길이 제한 없음. 입력한 내용 드러나지 x) - name : 사용할 폼의 이름을 지정 - action : <form> 태그 안의 내용을 처리해 줄 서버 프로그램 지정 - target : action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에서 열 수 있도록 하는 태그 - autocomplete : for 자동 완성 기능. 기본 속성값은 "on" 2. 폼 요소를 그룹으로 묶는 태그 : <fieldset>, <legend> 태그 - 하나의 폼 안에서 여러 구역 나누어 표시할때 <fieldset> 태그 사

원문보기 내부링크
Naver Blog

[Day 8] 폼과 관련된 태그들2(HTML의 다양한 태그들 - 6)

1. 사용자 입력을 위한 태그인 <input> 태그의 주요 속성 autofocus 자동으로 입력 커서를 갖다 놓음 placeholder 텍스트 필드에 힌트 표시 readonly 읽기 전용으로 만들어줌 required 필수 입력으로 만들어줌 max, min 숫자 입력 필드에서 최댓값, 최솟값 지정 step 숫자 입력 필드에서 증감 간격 설정 maxlength, minlength 텍스트 관련 입력 필드에서 입력할 수 있는 최대, 최소 길이 지정 size 텍스트 관련 필드에서 화면 표시할 크기 설정 list 연결할 데이터 목록 지정 2. 폼에서 사용하는 다양한 태그 <textarea>태그 여러 줄의 텍스트 입력 <textarea>내용</textarea> 속성 cols : 가로 너비를 문자 단위로 지정 rows : 세로 길이를 줄 단위로 지정 <select>, <option> 태그 드롭다운 목록을 만듦 <select> <option value="값1">내용1</option> <option

원문보기 내부링크
Naver Blog

[Day 11] CSS - 구글 폰트 사용하는 법

1. 구글 폰트 사이트 접속 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 구글 폰트 사이트 (1-1. 한글 글꼴만 모아서 보기)(생략 가능) 3. 사용하고 싶은 폰트 선택 원하는 폰트 클릭 후, 사용하고 싶은 스타일 선택 4. @import를 클릭하여 아래의 두 코드를 복사 5. 사용 예시 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>구글 폰트 - 나눔명조</title> <style> @import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap'); h2 { font-family:'Nanum Myeongjo', serif; } </style

원문보기 내부링크
Naver Blog

[Day 12] CSS - 다양한 스타일(2)

1. 목록 관련 스타일 1) list-style-type : 불릿 모양과 번호 스타일 지정 none(볼릿이나 숫자 없앰), disc(채운 원), circle(빈 원), square(채운 사각형), decimal(1,2,3,···), decimal-leading-zero(01, 02,···), lower-roman(로마 숫자 소문자), upper-roman(로마 숫자 대문자), lower-alpha 또는 lower-latin(알파벳 소문자), upper-alpha 또는 upper-latin(알파벳 대문자) 사용 예) .list1{ list-style-type: none; } 2) ㅣist-style-image : 불릿 대신 이미지를 사용하는 속성 list-style-image: <url(이미지 파일 경로)> | none 사용 예) ul { list-style-image: url('image/duck.png'); } 3) list-style-position : 목록 들여쓰기 가능하게 해

원문보기 내부링크
Naver Blog

[Day 13] CSS 박스 모델

1. 블록 레벨 요소&인라인 레벨 요소 ① 블록 레벨(block-level) 요소? : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것 ② 인라인 레벨(inline-level) 요소? : 한 줄을 차지하지 않고, 콘텐츠만큼만 영역을 차지하는 것 2. 박스 모델 웹 문서의 블록 레벨 요소는 모두 박스형태 → 박스 모델 요소 : 콘텐츠 영역, 패딩(padding), 테두리(border), 마진(margin) 등의 요소로 구성 박스 모델 요소 3. 관련 CSS 1) width, height : 콘텐츠 영역의 크기 지정 속성값 - auto : 콘텐츠 양에 따라 width, height 자동 결정. 기본값. - <크기> : px이나 em 단위로 지정 - <백분율> : 박스 모델을 포함하는 부모 요소를 기준으로 백분율(%)으로 width, height 지정. 사용 예) .box { width: 20px; height: 100px; } 2) box-sizing : 박스 모델의 크기를

원문보기 내부링크
Naver Blog

[Day 14] CSS(테두리, 여백, 레이아웃, 위치 지정)

1. 테두리 관련 스타일 cf) 박스 모델의 방향 순서는 top→right→bottom→left (시계 방향) 1) border-style : 테두리 스타일 지정 속성값 : none, hidden, solid, dotted, dashed, double, groove, inset, outset, ridge 사용 예) #box { border-style:double; } 2) border-width : 테두리 두께 지정 border-width: <크기> | thin | medium | thick 사용 예) #box1 { border-width:5px; /* 네 방향 모두 5px */ } #box2 { border-width:thick thin; /* 상하 - thick, 좌우 - thin */ } #box3 { border-width:thick thick thin; /* 상 - thick, 우 - thick, 하 - thin, 좌 - thick */ /* 이렇게 3개 일 경우 left는

원문보기 내부링크
Naver Blog

[Day 15,16] 배경 관련 CSS

1. 배경 이미지 관련 cf) 박스 모델의 방향 순서는 top→right→bottom→left (시계 방향) 1) background-color : 배경색 지정 속성 - 아래의 게시물에서 설명한 color속성과 같은 방법으로 사용 https://blog.naver.com/cleveryellowduck/222613856853 [Day 10] CSS - 다양한 스타일(1) 1. 글꼴 관련 스타일 1) font-family : 글꼴 종류 지정(글꼴 이름이 두 단어 이상이면 " "로 묶... blog.naver.com 사용 예) header { background-color: yellow; } 2) background-clip : 배경색의 적용 범위 지정 - border-box : 기본값. 박스 모델에서 가장 외곽인 테두리까지 적용 - padding-box : 패딩 범위까지 적용 - content-box : 콘텐츠 부분에만 적용 사용 예) #clip1{ background-clip: pad

원문보기 내부링크
Naver Blog

[Day 17] CSS - 연결 선택자와 속성 선택자

1. 연결 선택자 : 둘 이상의 선택자를 연결, 스타일이 적용될 요소 지정 - 연결 선택자는 조합 선택자, 콤비네이션 선택자, 콤비네이션 셀렉터 등으로도 불림 1) 하위 선택자(descendant selector) : 부모 요소에 포함된 하위 요소를 모두 선택 - 자손 선택자라고도 불림 상위요소 하위요소 사용 예) ...(생략)... section p { /* section 요소의 모든 하위 p 요소에 적용 */ color: violet; } </style> </head> <body> <section> <h1> 노란 오리 블로그 이용법</h1> <p>노란 오리 호감도 올리기</p> <div> <p>공감 : 노란 오리의 호감도 +1</p> <p>이웃 추가 : 노란 오리의 호감도 +1</p> <p>댓글 달기 : 노란 오리의 호감도 +1</p> </div> </section> ...(생략)... 2) 자식 선택자(child selector) : 자식 요소에만 스타일 적용하는 선택자. '

원문보기 내부링크
Naver Blog

[Day 17] CSS - 가상 클래스와 가상 요소

1. 가상 클래스 : 선택자에 추가하는 키워드로 선택한 요소가 특별한 상태여야 만족할 수 있음. - 웹 문서의 여러 요소 중에서 원하는 요소 선택하여 스타일 적용 ※주의※ 아래의 표에서 노란색 가상 클래스 선택자는 다음의 순서로 정의해야함 (순서 지키지 않을 시 적용 안되는 경우 발생) ① :link ② :visited ③ :hover ④ :active 가상 클래스 선택자 종류 :ㅣlink 방문하지 않은 링크에 스타일 적용 :visited 방문한 링크에 스타일 적용 :hover 지정한 요소에 마우스 포인터 올려놓을 때 스타일 적용 :active 지정한 요소 활성화 시 스타일 적용 :focus 지정한 요소에 초점이 맞춰졌을 때 스타일 적용 :target 같은 문서 안에서 다른 위치로 이동할 때에는 앵커(anchor)를 이용하는데, 앵커 대상에 스타일 적용 :enabled 지정한 요소를 사용할 수 있는 상태일 때 스타일 적용 :disabled 지정한 요소를 사용할 수 없는 상태일 때 스

원문보기 내부링크
Naver Blog

[Day 18] CSS - 변형(trnasform)과 트랜지션(transition)

1. 변형(transform) : 물체의 크기나 형태의 위치를 바꾸는 것 transform: 함수 사용 예) .image1{ transform: translate(10px, 10px);} 1) 2차원 변형 함수 ('transform: 함수'에서 함수자리에 쓸 수 있는 것들) translate(tx, ty) 웹 요소를 이동시킴 지정한 크기만큼 x축, y축으로 이동 (x축의 경우 → +값 : 왼쪽, -값 : 오른쪽 이동) (y축의 경우 → +값 : 아래쪽, -값 : 위쪽 이동) translateX(tx) 지정한 크기만큼 x축으로 이동 (+값 : 왼쪽, -값 : 오른쪽 이동) translateY(ty) 지정한 크기만큼 y축으로 이동 (+값 : 아래쪽, -값 : 위쪽 이동) scale(sx, sy) 웹 요소를 확대, 축소시킴 지정한 크기만큼 x축, y축으로 확대, 축소 (sz, sy배만큼 확대) scaleX(sx) 지정한 크기만큼 x축으로 확대, 축소 scaleY(sy) 지정한 크기만큼 y

원문보기 내부링크
Naver Blog

[Day 19] CSS - 애니메이션(animation) 속성

1. 애니메이션(animation) 속성 : 자바스크립트 사용하지 않고도 웹 요소에 애니메이션을 추가 가능 키프레임(keyframe)? : 에니메이션 중간에 스타일이 바뀌는 지점, @keyframes 속성으로 정의. animation의 속성 1)~7) 1) @keyframes : 애니메이션이 바뀌는 지점 설정 @keyframes <이름> { <선택자> {<스타일>} } 2) animation-name : 이름 사용해서 애니메이션 구별 animation-name: <키프레임 이름> | none 1)2) 사용 예) ...(생략)... <style> ...(중략)... #redbox { background-color: red; border: 1px solid blue; animation-name: tocircle; /* 애니메이션 이름 지정 */ animation-duration: 5s; /* 애니메이션 실행 시간 */ } @keyframes tocircle { /* shape 애니메이션

원문보기 내부링크
Naver Blog

[Day 20] CSS - 반응형 웹과 미디어 쿼리

이번 게시글부터는 다른 폰트를 이용해서 써보겠습니다 ㅎ.ㅎ(뭔가 더 깔끔해보이는 것 같아요!) 1. 반응형 웹 디자인 : 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 주는 것 1) 뷰포트(viewport) : 실제 내용이 표시되는 영역 - <meta> 태그 이용해서 <head></head>사이에 작성 <meta name="viewport" content="속성1=값1", "속성2=값2", .....> 뷰포트 속성 - width(뷰포트 너비) - height(뷰포트 높이) - user-scalabe(확대, 축소 가능 여부) - initial-scale(초기 확대, 축소 값) 가장 많이 쓰이는 뷰포트 속성 <meta name="viewport" content="width=device-width, initial-scale=1"> <!--뷰포트의 너비는 스마트폰 화면 너비에 맞춤, 초기 화면 배율은 1--> cf) 뷰포트 단위 vw(뷰포트 너비의 1%) vh(뷰포트

원문보기 내부링크
1 2 3