시간 빌게이츠가 간드아

콘텐츠 영역과 관련된 속성. 글자가 width, height값을 훨씬 넘겨버릴 때 화면상에 어떻게 보여줄지를 결정한다. - overflow: visible; 내용이 영역을 벗어나는 한이 있어도 다 보여준다. - overflow: hidden; 내용이 영역을 넘어가면 그 넘어간 부분은 숨긴다. - overflow: auto; 내용이 영역을 넘어가면 스크롤을 만들고 넘어가지 않으면 스크롤을 만들지 않는다. - overflow: scroll; 내용이 영역을 넘어가지 않아도 무조건 세로, 가로 방향 스크롤을 만든다. 출처 더보기 - 2020 국비교육 공부 내용

A A는 첫 번째 알파벳 B B는 두 번째 알파벳 C C는 세 번째 알파벳 @charset="utf-8"; /*tag reset*/ body, ul, li, figure {padding:0; margin:0;} ul {list-style: none;} ul {width: 260px; margin: 30px auto; padding: 20px; border: 2px solid black;} ul li {margin-top: 20px; background:ORANGE;} ul li:first-child {margin-top: 0px;} ul li strong, ul li figure figcaption {float: left; width: 140px;} ul li strong {text-indent: 10p..

- 웹 문서에서 사용할 글꼴은 font-family속성으로 지정한다. - 부모요소의 글꼴을 지정해주면 자식요소로 상속된다. 따라서 보통 제일 윗 요소인 body에 선언한다. - 서체명이 한글이거나 공백이 있는 경우 인용부호로 감싼다. - 한글명은 영문명으로 다시 한 번 써준다. 인식을 못하는 컴퓨터도 있기 때문이다. - 한 가지 글꼴만 지정해줘도 되지만 지정한 글꼴이 없을 경우를 대비해 두 번째, 세 번째 글꼴까지 지정한다. 1. font-size font-size의 속성값으로는 절대크기, 상대크기, 크기값 직접 지정, 백분율이 올 수 있다. 크기 값을 직접 지정하는 경우 고정되어 있는 단위인 px말고도 em과 rem이라는 단위가 있다. * em 부모 요소에서 지정한 폰트의 대문자 M의 너비를 1em으로..

메뉴A 메뉴B 메뉴C 메뉴D /* [displayBorder] */ #displayBorder ul li {display: inline-block; margin-right: -6px; border-bottom: 1px solid rgb(0, 0, 255);} /* inline, inline-block 요소들은 나열했을 때 4px정도의 여백이 사이에 생긴다. i. 가독성때문에 권하지 않음: 그때 html문서에서 li, /li태그의 간격을 띄지 않고 붙여주면 된다. ii. padding은 음수가 적용될 수 없다. margin에 약-5px을 준다. (브라우저 별로 사이즈를 달리 적용해야 한다)*/ #displayBorder ul li a {display: block; padding: 10px 30px; fon..

1. block 요소와 inline요소 display: none; - 요소를 렌더링하지 않도록 설정. - 원래의 요소가 있었던 영역도 나타내지 않는다. - 스크린 리더기도 읽어주지 않는다. ​ display: block; - 가로 영역을 모두 사용한다. - block요소 다음에 오는 요소는 무조건 줄내림이 된다. - width, height, margin, padding속성을 지정할 수 있다. - inline, block요소를 중첩시킬 수 있다. - ex). , , , , , , , .. 이중 h와 p는 예외적으로 내부에 inline요소만 중첩시킬 수 있다. ​ display: inline; - 해당 html요소의 내용만큼만 영역을 차지한다. - 다음에 오는 요소가 줄바꿈이 되지 않는다. - width,..

메뉴A 메뉴B 메뉴C 메뉴D /*tag reset*/ body, h1, ul {padding: 0px; margin:0px;} ul {list-style: none;} a {text-decoration: none; color: inherit;} #floatBorder ul {float: left; border-bottom: 1px solid #009000;} /* ② 자식인 li가 float되어 생기는 문제 해결 - 부모도 float추가 */ #floatBorder ul li{float: left;} /* ① block인 li를 한 줄에 여러개 배치 */ #floatBorder ul li a {display: block; padding: 10px 20px; font-weight: bold; color: ..

CSS (Cascading Style Sheets, 스타일 시트) 웹 문서의 스타일을 미리 저장해 두는 기술 선택자와 선언부로 나뉘며 선언부 안에는 속성과 속성값이 들어간다. 속성은 ;로 구분하지만 마지막 속성값 뒤에는 ;를 꼭 붙여주지 않아도 된다. *외부 css stylesheet만들기 CSS코드를 넣는 방식으로는 내부, 외부, 인라인 스타일 시트가 있다. 제일 자주 쓰이는 것은 외부 스타일 시트이다. html 파일(.html) : 태그 아래에 를 적어준다. css 파일(.style) : @charset "utf-8";을 맨 윗줄에 적어준다. *선택자 영역을 그룹지어 스타일을 적용하는 div태그 제목을 나타내는 h1태그 제목을 나타내는 h2태그 제목을 나타내는 h3태그 제목을 나타내는 h4태그 제목을..

*슬라이스툴 - 원본 이미지에서 필요한 크기만큼 영역을 잡는다. (여백을 많이 두지 말것) - 하나 자르고 저장하는 방식이 아닌 한꺼번에 자르는 영역을 지정한다. - slice select툴로 더블클릭하면 그 부분을 저장할 수 있다. - file>export>save for web(웹페이지를 만들 때 사용하는 이미지는 이곳에서 저장한다) : 원본 - 용량 무거운 사진이 웹페이지에 올라가면 로딩하는데 시간이 걸리므로 약간 퀄리티는 떨어뜨려도 가볍게 페이지가 뜨게 하고자 optimized를 한다. - Save Optimized as : slices를 All User Slices로 하여 저장 Logo_header - background color 눈끄고 png24(8은 화질저하됨. 배경을 투명하게 처리할 때 ..

자바스크립트 기초가 더 필요하다고 생각하여 듣고 있던 노마드 아카데미의 공부를 중단했었고 그 후 무기력의 날은 계속됐다. 아무래도 집에서는 공부가 잘 안되는 타입인데 코로나로 걱정되어 카페조차 나가질 못하고 사람도 제대로 못만나니 점점 우울해지기 시작하였다. 독학은 이동시간도 줄이고 내가 모르는 것만 골라 들으면 되니 어떻게 보면 효율적이지만 혼자서 무언갈 한다는게 쉽지가 않은 법이다. 나는 이러다가 코로나 걸려서 죽나 무기력함에 갇혀 죽나 비등비등하다는 생각이 들었다. 그럴때쯤 카페에 댓글로 교육을 잘 받고 취업하여, 꽤 만족스러운 회사생활을 하는 듯한 분의 글을 읽게 됐다. 혹시나 하고 검색하니까 나오는데.. 나는 더 알아볼 의욕도 없어 덜컥 그곳에 교육을 신청하였다. 그때가 거의 7월 초였는데 교육..

1. 웹접근성의 의미 - 접근성을 준수한다 : 장애상황에서 좀더 쉽게 문제 해결이 가능하도록 설계하는 것. - 접근성을 높인다 : 일시적, 지속적으로 발생하는 장애상황에서도 쉽게 접근할 수 있도록 설계하는 것. - 웹접근성은 장애인만을 위한 규정인가? : 고령자가 이용하는 상황, 시끄러운 영상을 보는 상황, 작은 스마트폰 화면으로 접속하는 상황 따라서 비 장애인에 대한 환경도 고려해야 하며 다양한 기술환경도 고려해야 한다. (어떻게 보면 웹표준과도 겹치는 부분이 있는 것 같다) - 하지만 보통 장애인 이용 접근성이라는 좁은 의미로 쓰는 경우가 많다고 한다. ex). 한국형 웹콘텐츠 접근성 지침 : 장애인과 보조기술에 관계된 지침, 비장애인은 혜택받는 정도로.. - 국내에서 가장 높은 점유율의 센스리더 화..