분류 전체보기 (33) 썸네일형 리스트형 [CSS] CSS 상속, 상속되는 CSS속성 1. 스타일 상속 Css 내용을 적용했을 때, 적용된 내용이 기타 하위 요소까지 영향을 주는 것을 말한다. body { margin:50px; } .people {/* people에 Css를 적용하였는데 */ color:lightpink; font-weight:bold; } 직원 사람 Jim Tommy Eve 로봇 이렇게 부모 요소를 통해 상속되는 Css 속성은 모두 글자/문자와 관련된 속성 이라는 것! ** 주의 : 그렇다고 모든 글자/문자 속성이 상속되는 것은 아니다. e.g. font-size | 글자 크기 font-family | 폰트(서체) font-weight | 글자 두께 font-style | 글자 기울기 Inline-height | 글자 높이 color | 글자 색상 text-align .. [CSS] CSS 선택자 1. 기본 전체 선택자 (Universal Selector) 범위 안에 있는 모든 요소 선택 * { background-color:gold; } 태그 선택자 (Type Selector) 태그 이름으로 요소 선택 단, 태그의 종류가 모든 요소를 구분할 만큼 고유한 것이 아니기에 원하는 요소를 조금 더 정확하게 집어낼 수 있는 class 선택자를 사용할 수 있다. div { background-color:gold; } 클래스 선택자 (Class Selector) class로 지정한 요소 선택 (중복 선택 가능) .name { background-color:gold; } 아이디 선택자 (ID Selector) 전역 속성 id 값을 통해 요소를 찾는 개념 #name { background-color:gold;.. [CSS] CSS 선언 방식, Types of CSS 내장방식 (Internal CSS) Html 안에서 Css를 작성하는 방식. 장점 : 별도의 Css파일을 만들지 않아도 된다. 단점 : Css양이 많이질 경우, Html 안에서 한번에 다 처리하기 어렵고 유지 보수가 비효율적이다. ** 단, 프론트엔드 개발 방식으로 Html, Css, Javascript 파일을 구별해서 관리하면 장점이 많다는 점을 기억해두자. ** 번들 : Html, Css, Javascript를 한번에 묶어서 서버에 올리는 방식이다. 번들하는 과정에서 개발하는 내용을 제품화시킬 때 파일로 분류한 내용들을 컴퓨터가 자동으로 합쳐서 내장방식으로 심는 경우가 있다. 이럴 경우, '내장방식'으로 Css를 작성하는 방법은 직접적으로 관리할 필요가 없어서 문제가 되지 않는다. 인라인 방식 (In.. [HTML] 전역 속성(기본 태그) 전역 속성이란? Html body의 전체 영역에서 모두 사용할 수 있는 속성을 뜻한다. 1. 전체 영역에서 설명을 명시하는 속성 NAVER 2. 요소에 적용할 스타일 을 지정하는 것 3. Css, Js 정확히 짚어서 제어하기 위한 속성. 중복가능한 이름이다. 4. { /*그 데이터를 잠시 els에 담아두고, 해당 데이터를 각각 반복해서 */ console.log(el.dataset.animalName) /*dataset 영역에 animal-name 해당되는 데이터를 콘솔창에 기록을 남긴다.*/ }) /* 먼저 그릇을 만들자 이 그릇의 이름은 element의 약어로 els로 짓겠다. 여기에 어떤 값을 할당할 것이다. (=부분) document, 즉 html 구조에서 querySelectorAll, quer.. [HTML] 핵심 요소 정리 div 특별한 의미가 없는 구분을 위한 요소. (Division) h1 (heading) 제목을 의미하는 요소. p (Paragraph) 문장을 의미하는 요소. (블록*상자* 요소) img (Image) 이미지를 삽입하는 요소. (인라인*글자*요소) e.g. 필수속성 (누락될 경우, 웹표준에 어긋난다) 이미지 경로 명시 alternate : 이미지의 이름 명시 이미지가 출력되지 못했을 때 대신해서 출력된다. 제목을 의미하는 요소 (Heading) 중요도가 클 수록 숫자가 작아진다. 대주제 중간주제 소주제 여기까지 사용하는 경우가 거의 없음 여기까지 사용하는 경우가 거의 없음 a (Anchor) e.g. 넘어갈 경로 명시 링크 걸어서 페이지 이동할 때 새 탭으로 열어서 명시한다. span 특별한 의미가 없.. [CSS] 브라우저 스타일 리셋,초기화_CSS reset 크로스 브라우징 (Cross Browsing) : 모든 브라우저에서 화면이 동일하게 보이는 것이 아니라, 동등한 수준의 정보 및 기능 제공이 우선이라는 개념이다. 우리가 사용하는 웹브라우저들은 각기 다른 속성과 기술요소(렌더링엔진)가 존재하며, 이로 인해 웹브라우저 별로 표현하는 것에는 차이가 있을 수밖에 없습니다. 동일한 웹사이트라 하더라도 어떤 웹브라우저로 보느냐에 따라 다르게 보일 수 있는 것이죠. '모든 브라우저에서 동일하게 보여준다'는 현실적으로 불가능한 얘기입니다. 다만, '크로스 브라우징'은 최대한 다양한 브라우저에서 제작자가 의도한 내용을 이상 없이 동작하게 해줍니다. [출처] 크로스브라우징 (Cross Browsing) 이란|작성자 패치워크 홈피온의 웹과 온라인마케팅 이야기 : 네이버.. [웹에 관하여] 상대경로 Absolute Path vs. 절대경로 Relative Path ./ 주변에서 찾기 ../ 상위에서 찾기 http(https) 절대경로 의미 / (//) 루트경로 = 최상위 경로 - 절대경로 의미 e.g. http://127.0.0.1:5500/index.html 로컬환경에서 내부적으로 라이브 서버와같은 플러그인의 도움을 받는 등 내 컴퓨터에서 특정한 개발용 서버를 열어줄 수 있다. 그 개발용 서버는 각각의 포트 번호에 의해 구별된다. i.e. 컴퓨터 내부에 5500번 이라는 주소에서 내 프로젝트를 개발 서버로 오픈한 것이다. 포트 번호가 달라지면 프로젝트가 달라질 수 있다. 도메인 주소 부분에 특정 키워드로만 해당 페이지를 접근할 수 있도록 만들기 (feat. 페이지를 구분하는 방법) 개발용 서버 만들기 naver '/' 는 관리하고 있는 현재 프로젝트(Port:5.. [HTML] 버전 지정 / CSS, JS 연결하기 의 html는 문서의 HTML 버전을 지정한다. HTML5 [IT업무 협업] 협업툴 소개 / 맥 단축키 Mac keyboard shortcuts VS code 마이크로소프트에서 제작한 에디터 Keyboard shortcuts (MAC OS) Keyboard shortcuts Actions ⌘⌥S 모두 저장 (프로젝트 전체 내용 저장 용도) ⌘B 사이드바 열기/닫기 ⌘P 빠른 열기 (파일/기호 탐색 e.g.css파일명) ⌘⇧P 모든 명령 표시, 에디터 모든 명령 접근 ⌘W 현재 편집기 닫기 ⌘⌥ F 찾기(검색) / 바꾸기(대체) ⌥↑ / ⌥↓ 줄 위로 이동 / 줄 아래로 이동 ⌘⌥ L Beautify (정리된 코드 만들기 **확장자 설치 시) ⌘ \ 편집기 분할 (백슬래쉬) [IT업무 협업] 오픈 소스 라이선스 오픈 소스 라이선스는, 개발과정에 필요한 소스코드, 설계도를 누구나 접근해서 열람할 수 있도록 공개하는 것을 뜻한다. 오픈 소스여도 저작권(라이선스)가 있는지 반드시 확인하고 사용해야 한다. (법적 분쟁을 피하려면..) 무료 사용여부는 개인 사용인지, 기업에서 사업용으로 사용인지 구분으로 본다. (e.g.개인사용 가능, 기업사용 가능 표시될 경우, 무료로 사용할 수 있다.) https://opensource.org/ Open Source Initiative The steward of the Open Source Definition, setting the foundation for the Open Source Software ecosystem. opensource.org 무료로 이용 가능한 (저작권 저촉 .. 이전 1 2 3 4 다음
