이렇게 삽니다

메뉴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). 한국형 웹콘텐츠 접근성 지침 : 장애인과 보조기술에 관계된 지침, 비장애인은 혜택받는 정도로.. - 국내에서 가장 높은 점유율의 센스리더 화..

자신이 부족한 점이 뭔지 알면 열심히 더 하면 그만이다. 그런데 나는 그것을 용납할 수 없다는 마냥 자바스크립트 공부에 실패하고(?) 나의 부족함을 깨달은 뒤 자괴감과 자책감에 시달려 아무것도 안하는 시간을 2주가량 보냈다. 왜 이렇게 남들은 다하는 것도 못하는지.. 그렇게 생각해봤자 달라지는건 없다.

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK //1. 변수 작성 : 스크립트 파일이 따로 있어도 같은 변수를 정의하지 말자.. const toDoForm = document.querySelector(".js-toDoForm"), //form태그 뭐하는지 좀 봐라.. : 새로운 li추가해야 해서 정의한것. toDoInput = toDoForm.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); //2. Function 실행 function init() { loadToDos(); toDoForm.addE..

출처 - Nomad Academy www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK #3.3-3.4 Saving the User Name part 1-2 1). 기본개념 - local storage : 작은 정보를 개발자 유저 컴퓨터에 저장하는 방법이다. - localStorage.setItem("key", value); local storage에 데이터 입력하기 - localStorage.getItem("key", value); local storage에서 데이터 가져오기 - form을 제출하는 event가 발생하면 document까지 가서 다른 곳으로 그 데이터가 이동한다. 그리고 페이지는 새로고침이 된다. : 이것..