윤민상 블로그

연결 선택자 하위 선택자 - 지정한 모든 하위 요소에 스타일 적용하기 자식 선택자 - 자식 요소에만 스타일 적용하기(부모요소 > 자식요소)(손자X 자식만) 인접 형제 선택자 - 가장 가까운 형제 요소에 스타일 적용하기(요소1+요소2)(첫째 동생만) 형제 선택자 = 형제 요소에 스타일 적용하기(요소1~요소2) (ex) h1~p{...}에서 h1다음에오는 모든 형제p요소) 속성 선택자 가상 클래스와 가상 요소 사용자 동작에 반응하는 가상 클래스 1. :link - 방문하지 않은 링크에 스타일 적용 2. :visited - 방문한 링크에 스타일 적용 3. :hover - 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용 4. :active - 웹 요소를 활성화했을 때의 스타일 적용 5. :focus - 웹 ..

웹과 멀티미디어 object 태그 - 외부 파일 삽입하기 data : 경로, type : 유형, name, width, heigth embed 태그 - 외부 파일 삽입하기(주로 object 태그를 지원하지 않는 이전 브라우저) src : 경로, type, width, height 비디오 : mp4, webm, ogv 오디오 : mp3, ogg 인코딩 : 원본 비디오를 압축해 컴퓨텅서 사용할 수 있는 비디오 파일로 변환 디코딩 : 비디오 정보를 가져와 비디오 플레이어에 보여 주는 과정 HTML5에서는 플러그인 프로그램 없이 브라우저에서 직접 재생할 수 있는 비디오 코덱만 허용. 3가지 1. H.264/AVC : mp4, 고화질 지원, 멀티미디어 업계 표준, 유료지만 온라인상에서는 무료 2. v8, v9 :..

header 태그 - 머리말 지정하기(주로 form 검색, nav 메뉴) nav 태그 - 문서를 연결하는 네비게이션 링크 section 태그 - 주제별 콘텐츠 영역 나타내기 article 태그 - 콘텐츠 내용 넣기 aside 태그 - 본문 이외의 내용 표시하기 iframe 태그 - 외부 문서 삽입하기(width, height, name, src, seamless(테두리 없애, 크롬, 사파리만 지원) footer 태그 - 제작 정보와 저작권 정보 표시하기 address 태그 - 사이트 제작자 정보, 연락처 정보 나타내기(주로 footer 안에서) (transition) IE8이하에서 시맨틱 태그를 사용하기 https://github.com/aFarkas/html5shiv aFarkas/html5shiv T..

CSS 포지셔닝과 주요 속성들 box-sizing 속성 - 박스 너비 기준 정하기 content-box(너비 값, 기본 값) | border-box(테두리까지포함, 마진은 포함x) float 속성 - 왼쪽이나 오른쪽으로 배치하기 left | right | none clear 속성 - float 속성 해제하기 none | left | right | both left는 left 해제, right는 right 해제, both는 둘다 해제 로렘 임숨(Lorem Ipsum) : 의미없이 내용을 채워주는 것 http://guny.kr/stuff/klorem/ 한글 Lorem Ipsum (간세네) 로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레..

CSS와 박스 모델 블록 레벨 요소와 인라인 레벨 요소 : 블록은 한줄, 인라인은 화면에 표시되는 콘텐츠만큼만 영역 차지 display : none | contents | block | inline | inline-block | table | table-cell 등 테두리 관련 속성들 border-style 속성 - 테두리 스타일 지정하기 border-width 속성 -테두리 두깨 지정하기 | thin | medium | thick border-color 속성 - 테두리 색상 지정하기 border 속성 - 테두리 스타일 묶어 지정하기 | | border-radius 속성 - 박스 모서리 둥글게 만들기 | 타원형태는 border-top-left-radiuse :

RIP 메트릭(Metric) : 최적의 경로를 결정할 때의 판단기준 RIP 동작 : 디스턴스 백터(거리, 방향) 라우팅 업데이트 : 라우터가 다른 라우터와 교환하는 정보를 RIP에서는 라우팅 업데이트라고 함. 이 때 교환하는 정보 : 라우팅 테이블(30초에 1번 보냄) 6번 수신 받지 않으면 그 라우터에는 뭔가 장애가 발생했다고 간주해서 그 라우터를 사용하는 경로들을 파기 RIP는 메트릭에서 홉수를 사용(홉 수 : 수신처 네트워크까지 통과하는 라우터 수) * RIP는 간단히 말해서 업데이트를 수신하면, 자기가 모르는 네트워크를 테이블에 추가하는 건데 그때, 업데이트를 보내 온 라우터를 그 앞의 네트워크에의 중계 라우터로, 업데이트를 받은 인터페이스를 그 앞의 네트워크에의 송신 인터페이스로 정하도록 한다...

웹에서 색상 표현하기 16진수 표기법 #ffff00(#ff0) rgb와 rgba 표기법 rgb(255,0,0), rgba(255,0,0,0.5) (a는 알파, 투명도, 1은 완전 불투명, 0은 완전 투명) hsl과 hsla 표기법 hue(색상), saturation(채도), lightness(밝기) 색상 이름 표기법 red, yellow, black 색상 추출 사이트 이용하기 https://www.webfx.com/web-design/color-picker/ Color Picker by WebFX – Free HTML Color Chooser This sample text has a font color of #c93200 Text here Background Color: www.webfx.com 배경 색..

글꼴 관련 스타일 font-family 속성 - 글꼴 지정하기 font-face 속성 -웹 폰트 사용하기 https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com font-size 속성 -글자 크기 조절하기(절대크기, 상대크기, 크기, 백분율) 보통 크기 사용(em, ex, px, pt) font-weight 속성 -글자 굵기 지정하기(normal(400), bold(700), bolder, lighter, 100~900) font-variant 속성 -작은 대문자로 표시하기(normal, small-caps) font-style 속성 ..