한 줄 정리 padding: 컨텐츠 안쪽 여백 margin : 컨텐츠 바깥쪽 여백 box-sizing : 컨텐츠 사이즈 고정 or 유동 box-sizing: content-box; : border width + padding size 전부 포함한 값을 유동적으로 출력 box-sizing: border-box; : border width + padding size + contents size 를 전부 포함한 값을 고정 # 박스 모델 영역 -브라우저가 렌더링할때 각각의 요소는 기본적으로 사각형 형태의 영역을 차지하게된다. -이 영역을 박스모델이라고 하며 CSS는 박스의 크기, 형태, 속성을 결정할 수 있다. -컨텐츠 영역 : width(너비) , height(높이) -안쪽 여백 : padding -테두리 :..

한 줄 정리 border: 선 굵기, 선 스타일, 선 색상 ex) border: 2px soild red 선 스타일 : soild(실선), double(두 줄), dotted(점 선) border-color: 색상; border-style: 선 스타일; border-width: 선 두께; display: inline (인라인으로 처리한다) block (블록으로 처리한다) inline-block (인라인이면서, 블록 속성을 가지게 한다) none (디스플레이 화면에 나오지 않지만, 개발자 도구에는 존재한다) list-style : 리스트 모양 (리스트 목록의 앞에 문자를 바꿔준다) 리스트 모양 custom해서 사용하기 .menu2{ list-style: none; } .menu2 li::before{ co..

어제 문득 지하철을 타다가 성령님께서 깨닫게 해주시는 계시가 있어서 적어본다. 우리는 삶에서 항상 승리와 패배 두 개를 구분지어 놓는다. 각자의 삶에서의 승리와 패배의 형태는 어느 정도 평균적이게 분리 되어 있다고 생각한다. 패배 (포기, 두려움, 용기를 잃고 낙심, 탕진, 소멸, 끊어짐) 등등.. 부정적인 것들은 아마 패배로 분류하지 않을까 싶다. 허나, 예수 그리스도를 내 삶에 주인으로 받아들이고, 거듭난 옛 사람이 아닌 새 사람으로 살아가는 사람은 어떨까? 에베소서 4:24 하나님을 따라 의와 진리의 거룩함으로 지으심을 받은 새 사람을 입으라 먼저, 새 사람과 옛 사람의 생각을 구분 지어야 할 필요가 있다. 옛 사람의 생각은 남을 판단하는 것(새 사람: 오직 판단과 심판은 하나님이 하시는 것이다),..

한 줄 정리 -font-family : 글꼴을 정의한다. -@font-face {font-family: "글꼴에 지정해줄 이름"; src: url("글꼴경로"); format("해당 확장자 명에 포멧 타입"): } : 글꼴 추가 -font-size : 글자의 크기를 정의한다. (px, em, rem) -text-algin : 정렬 방식을 정의한다. (center, right, left, justify) -color : 글자 색상을 정의한다. 키워드 = p{ color: red; } RGB 색상코드 = p{ color: #FF0000 ; } RGBA 색상코드 = p{ 255, 0, 0, 0.5 ; } RGB 함수 = p{ color: rgb(100%, 0%, 0%): } ## 텍스트 관련 속성 -font-..

한 줄 요약 전체선택자 : *{} 태그선택자 : p{}, h1{} 클래스선택자 : .해당클래스명{} 아이디선택자 : #해당아이디명{} 그룹선택자 : h1, p, div{} ## CSS선택자1 -선택자 : 어떤 요소에 스타일을 적용할것인가에 대한 정보이다. 선택자{ 속성명: 속성값; } 일단, 실습에 들어가기 전에 # 기본선택자 (전체 선택자) * : asterisk는 전체를 의미한다. * {

한 줄 요약 ## CSS란? -CSS는 Cascading Style Sheets를 의미한다. -계단식으로 스타일을 정의하는 문서 -CSS는 HTML문서에 스타일을 더해준다. -HTML 문서는 태그가 태그를 포함하는 계단식 구조를 갖고 있다. -HTML과 CSS를 더해서 웹브라우저로 실행하게되면 웹브라우저는 문서에 적혀있는대로 화면을 구성하고 사용자에게 보여준다 이 과정을 렌더링이라고 한다. -CSS문서는 자체적는 독립적으로 존재할 수 있지만 그 목적이 구조화된 HTML 문서의 스타일을 정리하는데 있으므로 HTML문서가 없는 CSS문서는 사실상 의미가 없다. -HTML : 웹문서의 콘텐츠를 구성하는 언어 -CSS : 웹문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치등...) -HTML과 함께 사..

한 줄 요약 select : 옵션명 textarea : -select 사용 햄버거 피자 파스타 짬뽕 짜장면 -내가 무슨 음식을 선택했는지 알려면?? -name이 lunch인 것들 중에서 value 값이 hamburger인 햄버거를 선택한다 (value 값 지정) 햄버거 피자 파스타 짬뽕 짜장면 -선택지가 필요없는 항목은 value값을 지정해주지 않고 작성한다. 통신사 SKT KT LG 통신사 SKT KT LG 010 011 012 012 012 012 통신사 SKT KT LG 010 011 012 012 012 012 -textarea 텍스트 영역 생성

한 줄 정리 input type="타입의 속성" text : 글자 password : 비밀번호 number : 숫자만 입력 placeholder="띄우고 싶은 글자" : 해당 input란에 글자가 생긴다. maxlength : 글자 수 제한 autofocus : 화면 시작 시 커서 누른 효과 type="button" value="글자" : 버튼 생성 color : 컬러 지정 생성 type:"range" max="수치" min="수치" step="수치" : 사운드바 생성 (step 움직이는 단위) date : 날짜 표기 생성 checkbox : 체크박스 생성 form 태그 : submit 태그 : 데이터를 최종적으로 다른 페이지로 넘겨준다 (데이터베이스) ## input 태그 -사용자로부터 값을 입력받을수..

한 줄 정리 (Ordered List) : 번호가 달리는 순서 목록 작성 (Unordered List) : 번호가 없는 순서 목록 작성 : 목록에 표기할 글자를 넣는 태그 ##목록 표시하기 -목록이란 연관있는 항목(item)들을 나열하는것을 의미한다. -HTML은 '순서있는 목록'과 '순서없는 목록'으로 구분한다. # 순서있는 목록 (Ordered List) 프로그래밍 공부 순서 변수 연산자 조건문 클래스 상속 인터페이스 # 순서없는 목록 (Unordered List) -ol과 ul의 차이는 앞에 붙는 기호 차이이다. -이 기호 또한 변경이 가능하다. 요크쇼테리어 말티즈 시츄 도베르만 골든리트리버 슈나우저 퍼그 # ol과 ul을 동시에 적용해서 활용하기 예제1 이탈리아 쇼핑 리스트 이탈리아 커피 리스트 ..