성장하는 큰숲의 코딩 노트 성장하는 큰숲의 코딩 노트

인프런 HTML&CSS강좌 CSS 속성 4 CSS 속성 font-family , font-size 속성 - font-style, font-weight, line-height 속성 - text-align, text-decoration 속성 position 속성 font-family 텍스트의 글꼴을 모아놓은 명령어로 몇 개의 폰트를 세팅해 준다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행되며, 모든 글꼴을 사용할 수 없는 경우 기본체로 출력된다. 폰트 이름을 적고, 세리프와 산세리프를 정하는 타입으로 기재하면 된다. Font-Size 텍스트의 크기를 지원한다. Px->em 변환법 "pixels / 16= em" Font-Weight 폰트 두께를 결정한다. normal, bo..

인프런 HTML&CSS강좌 CSS3 단위 - url() - display 속성 - visibility 속성 - opacity 속성 url() background-image : url(배경 이미지의 경로) display 속성 : 어떻게 표시할지 선택 : inline, block, none - inline : 한 줄로 나열되게끔 만드는 요소. 앞 뒤 줄바꿈을 바꾸지 않아도 됨 - block : inline요소를 블록요소로 만들어줌. 앞 뒤로 줄바꿈이 됨. - none : 공간을 차지하지 않음. 박스 생성 안됨. visibility 속성 : 요소를 보여줄지 말지 결정 : visible, hidden, collapse opacity 투명도를 조절하는 속성 기본값은 100%(1)이며 0%에 가까워질수록 투명해진다..

인프런 HTML CSS 문자 선택자 링크 선택자 부정 선택자 문자 선택자 selection 드래그되어 있는 문자들의 속성을 설정할 수 있다 #content p:first-child::selection { } 콘텐츠에서 p태그에 속하는 첫 번째 요소를 드래그할 때 드래그한 영역이 파란색으로 변하고, 글자색은 노란색으로 변한다. 중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술, 경영, 인력 등의 종합지원체계를 구축함으로써 중소기업의 경쟁력 제고를 위해 설립된 서울산업진흥원은 중소기업의자생력을 키우고 안정적인 경영여건을 조성하기 위하여 끊임없이 노력하고 있습니다. first-child 형제 관계에서 첫 번째 자식 요소에만 스타일이 적용된다. last-child 형제 관계에서 맨 마지막 자식..

생활코딩 WEB JavaScript 배열과 반복문 배열 Array Syntax get add count 반복문 Loop 출력된 결과 화면이다. 반복되는 코드를 줄여주는 역할로, for와 while이 있다. while (true)인 경우엔 중괄호 안에서 반복적으로 실행되고 while(false)인 경우엔 반복문 밖을 벗어난다. var 변수 i값이 0일 때 while(i

인프런 HTML CSS 문자 선택자 first-letter, first-line 01 정리하기에 앞서 중요한 부분 체크하고 넘어가기 margin : 0 auto; 위쪽을 제외한 나머지는 균등하게 공백 브라우저 중앙에 가운데 정렬 margin : 0 0 0 0 ; top right bottom left 위 오른쪽 아래 왼쪽 공백 생략해서 두 개의 값만 쓸 수도 있음 02 주석에 관련된 문제 해결 브라켓 편집기를 이용할 때 주석이 적용되지 않는 경우가 있었다. 그럴 때 brackets 주석 단축키를 사용하면 쉽게 해결할 수 있다. 단축키 : ctrl+/ 선택하고자 하는 영역을 주석처리 혹은 해제 가능 문자 선택자 first-letter와 first-line의 속성 first-letter 처음에 나온 문자를 ..

생활코딩 비교연산자와 Boolean 데이터타입, JavaScript 조건문 if else 비교 연산자와 Boolean은 'true'와 'false' 두 개의 데이터로 이루어져 있다. IF-false 조건문 if else의 활용을 통해서 아래 코드를 WEB 간단하게 줄일 수 있음. WEB 리팩토링(refactoring) 유지보수 this (자기 자신을 가리킬 땐 this로 대체 가능) 생활코딩에서 this를 사용함으로써 코드가 간결해진다는 사실을 알게 되었다. 하지만 this가 어떤 역할을 하는지, this만 가지고 무엇을 가지고 있는지 이해가 되지 않는다. thisd에 대해 검색해본 결과이지만 아직 감은 잘 안잡힘.. developer.mozilla.org/ko/docs/Web/JavaScript/Ref..

생활코딩 WEB2 - JavaScript 데이터 타입 문자열과 숫자 정리 JavaScript 컴퓨터 언어 데이터 타입 = 자료형 문자열 String 따옴표로 시작해서 따옴표로 끝난다. "Hello world" , 'hello world' "hellow world".length 는 몇 글자인지 알려준다. 숫자 산술연산자 (+, -, *, /) 변수와 대입 연산자 (=) 변수 = 바뀔 수 있는 값 x= 1; 오른쪽에 있는 항을 x에 있는 왼쪽에 있는 변수에 대입한다. 변수를 사용할 땐 가급적이면 var을 붙인다. ex) var name 상수 = 바뀌지 않는 값 유용한 사이트 소개 https://developer.mozilla.org/ko/ MDN Web Docs MDN 웹 문서 사이트는 HTML, CSS, ..

인프런 실전 HTML CSS 강좌 정리 - CSS 기본 1, 2 역시나 float : left에서 또 막히고 있다. 디버깅을 여러 차례 해도 문제점을 발견하진 못했는데, 어떨 땐 또 잘 되니까 그게 신기할 따름. marging 0 auto와 overflow:hidden적용해도 오류발생. 방법이 float: left 뿐인걸까? -_-;;; 생각에 질문을 올린 결과 답변을 얻을 수 있었다. display:inline-block IE 호환성 거치치 않을 경우 : flex 속성 권장 복습하면서 속성 적용 시켜볼 것. CSS 기본 I - 선택자란? tag 선택자 - * 선택자 - 전체와 특정태그의 혼합 선택자란? 특정 태그를 선택하여 해당 태그의 속성을 변경 하는 목적으로 사용된다. 안녕하세요 HTML 공부중입니..