GPD2021

선택자::before{ 속성:속성값} : 선택자(a)에 해당하는 내용이 나오기 전에(before) 해당 속성을 부여. 3월 블록체인반 모집 임박 #subject7>ul>li>a::before{ content: " - "; } - 3월 블록체인반 모집 임박 이렇게 그냥 html에 '-'를 넣어줘도 화면에는 똑같이 나오지만 앞에 붙은 ' - '를 다른 기호로 바꿔주고 싶을 때, 바로 위의 경우는 html에서 해당 영역에 대해 다 수정을 해줘야 한다. 하지만 a:before를 사용하면 content 속성 값만 수정하여 쉽게 변경할 수 있다. 여러 줄의 html을 한 줄? 두줄? 의 css로 바꿀 수 있게 된다.

주석으로 html/css 영역 구분 잘 하기 div남발 하지 말 것. div로만 계속 하면 가독성이 떨어짐. [테이블] ‘게임 콘텐츠 제작’ 취업률 1위! 취업현황- [어디] [누구] 합격을 축하합니다. 정규 개강일 - 4월 5일 월요일 테이블을 만드는 태그 행을 만드는 태그 열을 만드는 태그 [z-index:숫자] : layer 설정 예) visualBar(50px짜리 검은색 가로선)가 [오시는 길] 위를 덮어서 거슬렸다. 나는 오시는길이 포함되어 있는 퀵메뉴를 검은선 위에 올리고 싶었다. 이럴 때 z-index:숫자를 써주면 되는데, 더 위쪽에 나타내고 싶은 객체에 더 높은 수를 주면 된다. position속성도 할당해야한다. 퀵메뉴는 위치에 고정시키려고 position:fixed를 줬고 비주얼바는 ..

[] .prev{ position: relative; left: -20px; bottom: 45px; width: 20px; height: 30px; background: #eee; } .prev>a{ color: #fff; } .prev:hover{ background: #ddd; } .next{ position:relative; left:260px; bottom:75px; width: 20px; height: 30px; background: #eee; } .next>a{ color: #fff; } .next:hover{ background: #ddd; } 취업자 인터뷰에 나오는 저 빨간색이 이미지인줄 알고 Sources에서 계속 찾았는데 아무리 찾아봐도 안 보여서 코드를 보니까 각각 에 a태그를 주고..

W3C : HTML 표준을 볼 수 있는 곳. html 에서 >

오전 11시부터 12시 55분까지 블록체인 특강이 있었다. 내가 나중에 저 사람이 하는 강의랑 같은 주제로 다른사람에게 강의해야한다고 생각하고 흐름을 따라갔다. 끝날 때는 이번 강의 키워드 몇 개 뽑아서 블로그에 남기려고 '필기'씩이나 하면서 들었다. 강사 이름은 기억이 안난다. 무슨 게임회사? 박씨였던 거 같은데 ppt에 이름 좀 써놓지 +)Bearfoot Games 박재덕CEO ^^ [도입] 블록체인에 대해 좀 아는지? 비트코인 하는 지에 대해 물었다. 학생들의 블록체인에 대한 사전지식과 관심, 흥미의 정도를 파악하고자 했던 것 같다. 블록체인에 대해 안다고 손들었던 동기는 별로 없었다. 이런 질문에 안다고 말하기는 좀 어렵다. 누군가가 친구의 전화번호를 묻는다면 그 질문은 안다, 모른다 확실하게 말..

첫째 날 배우고 그냥 넘어갔던 게 있었다. 아이디: 패스워드: 패스워드 확인: 생년월일: input 특성 유형 설명 placeholder password, search, tel, text, url 양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용 양식 컨트롤? 뭐 어렵게 적혀 있는데 그림으로 보면 한 번에 이해가 된다. 박스 안에 아이디나 비밀번호를 입력하면 내용이 들어가게되면서 양식 컨트롤이 비어있는 상태가 아니기 때문에 placeholder로 지정해준 내용은 사라진다. 과제) 네이버 로그인 화면 비밀번호 박스 만들기. 아이디 @naver.com 비밀번호 저번에 과제로 네이버 회원가입 화면을 한번 그대로 따라해봤는데, 그때는 뭐 소스코드를 보고 따라한 게 아니라 화면에 보이는 대로 따라 했었다. ..

*{margin:0; padding:0;} html{ overflow-x: hidden; overflow-y: auto; } ul,li { list-style: none; } #wrap{ width:100%; } #header{ width:1600px; height:110px; margin: 0 auto; } #logo{ float:left; display:inline-block; margin: 20px 0 0 0 ; height: 100px; width: 200px; } #gnb{ float:right; } #gnb > ul > li{ float:left; padding:40px 0; width:180px; } #gnb > ul> li > a { color:#004385; font-weight:bold..

★코드의 중복을 피할 것. ex) 헤더 높이 180 , 로고 높이 180, gnb 높이 180 X -> 헤더 높이만 180으로 지정 O 과제: 오늘 처음 써본 css 태그 어떤 내용인지 정리하기. #visual{ height: 500px; text-align: center; /* overflow:visible; */ } /* .visual_img{ width:1920px; margin:0 auto; } */ #container{ margin: 0 auto; width: 100%; height: 200px; } #contents{ /* 사이트에 표시될 컨텐츠의 영역을 정의한다. */ width: 1200px; height: 100px; margin: 30px auto 0 auto; } .con_notice..