html
-
인프런 HTML&CSS강좌 CSS 속성-4 font-family, position 속성프로그래밍 연습 2020. 11. 14. 10:04
인프런 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 속성프로그래밍 연습 2020. 11. 12. 07:42
인프런 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 문자 선택자 링크 선택자 부정 선택자프로그래밍 연습 2020. 11. 4. 14:48
인프런 HTML CSS 문자 선택자 링크 선택자 부정 선택자 문자 선택자 selection 드래그되어 있는 문자들의 속성을 설정할 수 있다 #content p:first-child::selection { } 콘텐츠에서 p태그에 속하는 첫 번째 요소를 드래그할 때 드래그한 영역이 파란색으로 변하고, 글자색은 노란색으로 변한다. 중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술, 경영, 인력 등의 종합지원체계를 구축함으로써 중소기업의 경쟁력 제고를 위해 설립된 서울산업진흥원은 중소기업의자생력을 키우고 안정적인 경영여건을 조성하기 위하여 끊임없이 노력하고 있습니다. first-child 형제 관계에서 첫 번째 자식 요소에만 스타일이 적용된다. last-child 형제 관계에서 맨 마지막 자식..
-
인프런 HTML CSS 문자 선택자 first-letter, first-line프로그래밍 연습 2020. 11. 2. 17:01
인프런 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 처음에 나온 문자를 ..
-
인프런 실전 HTML CSS 강좌 정리 - CSS 기본 1, 2프로그래밍 연습 2020. 10. 19. 20:40
인프런 실전 HTML CSS 강좌 정리 - CSS 기본 1, 2 역시나 float : left에서 또 막히고 있다. 디버깅을 여러 차례 해도 문제점을 발견하진 못했는데, 어떨 땐 또 잘 되니까 그게 신기할 따름. marging 0 auto와 overflow:hidden적용해도 오류발생. 방법이 float: left 뿐인걸까? -_-;;; 생각에 질문을 올린 결과 답변을 얻을 수 있었다. display:inline-block IE 호환성 거치치 않을 경우 : flex 속성 권장 복습하면서 속성 적용 시켜볼 것. CSS 기본 I - 선택자란? tag 선택자 - * 선택자 - 전체와 특정태그의 혼합 선택자란? 특정 태그를 선택하여 해당 태그의 속성을 변경 하는 목적으로 사용된다. 안녕하세요 HTML 공부중입니..
-
웹표준 사이트 레이아웃 만들기 연습 1 스스로 코드 작성하기프로그래밍 연습 2020. 10. 14. 17:58
웹표준 사이트 레이아웃 만들기 연습 1 스스로 코드 작성하기 오늘은 동영상을 보지 않고 완성 예제만 보고서 스스로 코드를 작성했다. 완성 예제와 소스코드는 아래 내가 작성한 포스팅 혹은 WebStoryBoy님 티스토리 블로그나 유투브에 들어가면 확인할 수 있다. 초반에 기초지식 없이 WebStoryBoy님 강의를 무작정 따라하며 기계적으로 암기가 되었고, 태그사전으로 각 태그들의 정의도 정리하고 있었다. 오늘은 Layout01을 완성예제만 띄어놓고, 직접 코드를 작성하고 정리하려고 한다. 01. 주석을 지정하는 자리가 따로 있다 주석이란 개발자들이 소스코드에 대한 정보를 공유하기 쉽게 작성하는 일종의 메모 같은 것인데, 브라우저 상에는 노출되지 않는다. 처음엔 위치를 고려하지 않고 편한대로 작성했다. 내..
-
인프런 실전 HTML CSS 강좌 정리 - HTML 기본3프로그래밍 연습 2020. 10. 13. 10:51
인프런 실전 HTML CSS 강좌 정리 - HTML 기본3 1. 블록태그 태그처럼 대행이 없지만 블록 쌓듯이 밑으로 나열되는 태그 지난번 정리했던 태그와 List태그가 해당된다. 2. 인라인태그 블록태그와 다르게 옆으로 쭉 나열되는 태그로 인라인 요소가 들어가 있다. 오늘 정리한 태그가 있다. 3. 태그 인라인 요소를 그룹화를 정의한다. 주변 요소와 구별하기 위하거나 다른 적절한 태그가 없는 경우에 사용한다. CSS 스타일링 사용을 위해 설정하는 경우가 많다. 비교 (Compare) 블록 요소를 그룹화한다면 를 사용한다. 인라인 요소를 그룹화한다면 태그를 사용한다. 4. 태그 미디어 영상을 재생하며, 태그와 같이 사용한다. 5. 폼 태그 태그 데이터를 입력할 수 있는 폼 컨트롤을 정의한다. 사용자가 입력..
-
인프런 실전 HTML CSS 강좌 정리 - HTML 기본2프로그래밍 연습 2020. 10. 10. 18:23
인프런 실전 HTML CSS 강좌 정리 - HTML 기본2 https://youtu.be/HheApDKZkRo 리스트 태그 , , , , , 1. 순서가 필요 없는 목록 태그 : unordered list 태그 : list item 2. 순서가 정해져 있는 목록 태그 : ordered list 3. 정의 리스트 태그 태그 - Definition List - 용어의 목록의 시작과 끝을 지정하는데 쓰인다 - 하위요소로는 , 태그가 있다 태그 - Definition Team 약자 - 정의하고자 하는 제목을 나타내는 데 사용된다. 태그 - Definition Description의 약자 - 내용을 적을 곳에 사용된다. , , 모두 블록 요소(Block Element) 속성이다. 4. a 태그 속성 링크 클릭시 ..