학원/디자인 (28) 썸네일형 리스트형 풀페이지 하이트/글자 없앨때 텍스트인덴트보다 블라인드 /슬라이드배너/반응형-상위영역부터 잡는겨 풀페이지 하이트 1080으로 잡지말고 900내외로. 좀 여유있게 잡으려면 800으로. (그래야 해상도가 작아져도 한화면에 들어감) (720~860) (넘꽉차면 -글자 없앨때 블라인드 쓰는게 좋음 텍스트인덴트보다\\\\ - 최대값을 2번으로 봄 2,3,4 2번 사진 첫 화면에 뜨니깐 - 이렇게 상위영역부터 잡는겨 - 간단할때 쓰는 삼항연산자 위에껄 바꾸면 if(showBanner>=2 ? showBanner = 2 : showBanner=pageNum ); css 바디 = 컨텐츠높이 (내용의 길이까지) 퍼센트 = 부모기준. (함부로 쓰는거아님) 부모에 높이가 없을 때 쓰면 안됨 100 vh (뷰포트하이트) = 화면 높이 100vh - 180px 위아래 90씩 남기려할때 height: calc(100vh - 180px); css는 연산자 앞뒤로 꼭 띄어쓰기 해줘야한다. 안그러면 문자로 인식함 위에서 부모에서 잡아줬으니가 밑에서 100% 사용 -로고 이거 일단은.. 로고가 저게 아니라 파리바게트 svg였으면 딱맞게 들어온거다,, 이미지로 할거면 100 너비 해주면 되고 배경이미지는 컨테인으로 꽉채워주면 된다. 둘다똑같은 결과 배경 background: url('../images/ft_logo_01_spc.png') center center / cover no-repe.. [css] gnb메뉴바가부모에게넓이상속안받기/메뉴바에 화살표만들고모양수정/보더라디우스+오버플로우히든=세트/호버의옳은위치,웹접근성호버/정석메뉴구조,순서/보더로만든삼각형엔박스쉐도.. 사이즈 통일하기 댑스 2가 부모에게서 넓이를 받지 않게 해야겠지요. (부모 글자수따라 앵커 넓이가 생성된다) 뎁스2에 포지션과 레프트 탑 주고 뎁스원에 .. 이렇게했는데 뭔가 이상해 딱지모양 삼각형! 완성 -삼각형 이쁘게 만들어보기 (너비쭐이기) -border-radius: ; = 어,, 모서리 둥글게. => border-radius: 12px; overflow: hidden; 이렇게 쌍으로 써줘야 앵커에 호버 줬을때 (백그라운드색깔등) 뾰족사각형으로 되는 거 방지할 수 있다. 어,,, 호버됐을때 서브메뉴 (뎁스투) 펼치기. ~, + : 바로밑에..동생찾기. ~=앵커 밑에서부터 뎁스투를 전부 찾으셈 수정! 이렇게 해야.. 저기저기 앵커머시기 ..좋대.. 이렇게하면 웹접근성 탭메뉴 작동 됨. 이 메뉴 구조.. 2-뎁스1/줄간격%X/gnb호버-밑선/서서히나타나는효과/호버-보더바텀,위치/콘텐츠겹침제트인덱스/검색버튼사이즈조절/gnb밑아코디언/프로젝트팁,따옴 어..뎁스 1에 위드스도 없앴다. -줄간격에 % 주면 안된다. 바디기준으로 들어가버림. 우선 밑에 보더 먼저.. 생성. (근데 이방식은 글자가 솟아올라간다. 그래서 이방식 추천 ㄴㄴ) => 생겼다. 액티브는 안해도 될듯 왜냐면 클릭시 빨간거 생길 필요는 별루 - transition: border 0.3s; 이 놈을 줘야하는디, .depth1 > a { /* 메인메뉴 */ 여기가 아닌 .depth1 > a:hover, .depth1 > a:focus { 여기에 넣게되면 앵커에 마우스를 갖다 댔을 때만 서서히 나타나고 마우스 빼면 바로 사라짐. (근데 이방식은 글자가 솟아올라간다. 그래서 이방식 추천 ㄴㄴ) => 그렇다면 추천하는 방법대로 만들어보자. (affter 붙은 것들은 요기 끄트머리에 뭔가 해놓은 .. 1[css]웹접근성-앱솔루트,픽스드/줄간격은라인헤이트/디스플레이블럭생략상황/배경색변했을때방법2/트랜지션/포커스와액티브/로고사이즈설정+맥시멈미디엄 https://www.wah.or.kr:444/ 이고 디자인이 올드하니 리뉴얼해보는 프로젝트도 괜찮겠다. 고하셨다. -앱솔루트, 픽스트는 위드스를 조정해줘야 한다. 줄어들기때문 - -패딩말고 라인헤이트를 주는 식으로 가는게 좋다. (줄간격 잡을 때) 왜냐면 정확한 수치를 알 수 있다. - line-height: 44px; /*얘는 디스플레이 블럭, 인라인 블럭일 때만 먹는다.*/ text-align: center; 부모태그에 넣어도 똑같은거 부모태그에 웬만하면 넣어주는게 좋다. (작동이 똑같더래도,) (부모에게 주고 상속받으면 되는거,) => 그래서 저 드래그해놓은거 위 skip 에 넣었다. -앵커 => 부모로부터 글자색을 상속받지 못한다. 이유 = 너무 중요한 내용을 담고있기 때문이다. - 겹쳐놓기.... 10/18 그래픽수업 https://blog.naver.com/hyunjuhj0824/222903531447 10/19 그래픽수업 아이콘 다운받앗서 그냥 쓰기보다 내가 두께바꾸거나 컬러링 효과 넣어서 써보삼. 이런식으로 - id 는 중요한 영역에 쓴다. (큼직큼직한거) , 인풋에 많이 쓴다. 라벨때문에. -아이콘같은거 이미지로 굳이 정보전달할 필요 없다, 예브라고넣어준거기 때문에 . 마크업하지않고 css 가상이미지로 넣어준다. 이미지로 넣을까요 배경으로 넣을까요? 에 대한 고민이 있어야겠지여, (선택 기준 - 시각장애인들에게 이 아이콘에대해 설명을 해줄 필요가 없느 아이콘이라면 배경처리.) ex 이런거 굳이 시각장애인들에게 "초록우산아이콘" 이라하며 설명할 필요 없잖아. -ㅇ 위에께 옛날 방식 밑에 네이버가 요즘 방식이다. 이 방식은 이미지 좌표를 메모해둬야한다. (코딩은 네이버 따라가야한다. 유행을 선도하고 프로그램 개발하는 분들.. 10/14 그래픽수업 도형에 .... 그뭐냐? 글자툴. 이건 잘안쓴다. 선택영역 부를라면 컨트롤 클릭하면 되지. 포토샵 24px 사용 -> 코딩할때 24px 로 입력해야 같음. 대문자가 나은가? 보기위해 TT저것을 누르면서 비교해보기. 소문자의 작은 대문자화 (소문자만 대문자 되는데 소문자 크기로 .) 위첨자 - 글자레이어만 보기 색 채운거, 보정물, 글자, 도형, 스마트오브젝트 이거사용하면 이렇게 글자 옵션 일괄변경할때 참 좋다. 이런 상황에서 컨트롤 케이 툴즈 픽셀 그거 방향키 끄고 맞추면 되는것이다~ (그런데 그렇게 티 안나서 그냥 해도 되긴한다 하하. 아니면 여기서 수치 애매하게 30.94 이렇게 돼있으면 31로 올려버리든지 . 스마트 오브젝트로 묶어놓았었는데 색깔이랑 등등 수정하고싶을때 복사하고싶은거 레이어 우클릭해.. 이전 1 2 3 4 다음
