IT
Sprite 속성 / Sprite animation 연습
Sprite 속성 / Sprite animation 연습
2022.07.02[ Sprite ] 여러개의 이미지 소스를 하나의 이미지로 합친후( 비슷한 성격의 배경 이미지를 하나의 파일로 제작 후에 )background-position 등의 css속성을 통해 배경이미지를 렌더링하는 방법이다. 이미지가 많은 웹 페이지는 여러 서버 요청을 로드하고 생성하는 데 시간이 오래 걸릴 수 있으나, 이미지 스프라이트를 사용하면 이미지 다운로드에 걸리는 시간과 http요청 수가 감소하고 웹 프론트엔드의 성능을 최적화한다(: [ Sprite 속성연습에 사용할 배경이미지 첫번째 ] [ Sprite 속성연습에 사용할 배경이미지 두번째 ][ 위에 이미지를 이용하여 sprites로 가져오기 ] ******** 이미지의 시작은 x좌표 : 0, y좌표 : 0 이다.Image Sprite 중에..
position : absolute / fixed / relative / static / z-index
position : absolute / fixed / relative / static / z-index
2022.06.30[ Position 속성 ] # absolute : 절대적인 # fixed : 고정된 # relative : 상대적인 # static : 정지된 [ position_absolute 속성값 ] box1 box2 box3 box4 box5 position: aboslute;속성은 부모에 position설정값이 없을 때에는 브라우저의 를 기준으로 자리를 잡는다. 그런데 부모요소에 position속성값이 생기면(static을 제외) 부모를 기준으로 자리를 다시 재정렬한다!! # 절대위치(absolute position)은 고정위치가 view port를 기준으로 위치를 결정하는 것과 비슷하게 동작한..
상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child
상태선택자 / 반응선택자 / 구조선택자 / placeholder / nth-child
2022.06.29[ 상태선택자 ] 거의 쓰진 않지만 일단 알아두자. # 비밀번호는 내가 못바꾸게 해놓고 싶을 때?사용할 수 없게 하는 속성은 disabled="disabled"속성명과 속성값이 같으면 하나만 써도 가능! # input : disabled 는사용할수 없게 한 속성을 선택하는 상태선택자임. # placeholder 속성: 가상의 값을 넣어주는것. # 커서가 들어가 있는 상태를: focus라고 함. 이름: 아이디: 비밀번호: # 사실 위에것들 잘 안씀. 그나마 쓰게 되는건input:focus 사용선택자다.padding을 줘서 박스크기를 크게 한다던지...아니면, 글씨의 색깔을 다르게 줘서 내가 뭔가 입력하는 것들을다른색상으로 입력이 된다던지...혹은 bo..
레이아웃 연습하기 / Z 레이아웃
레이아웃 연습하기 / Z 레이아웃
2022.06.28# 사람의 눈이 많이 가는데 컨텐츠를 배치:): F레이아웃 # F레이아웃을 가지고있는 web site많음~ 요즘 트렌드는 메인에 큰 이미지라던지 큰 동영상이라던지.. 그런것들 배치하는 구조+_+: Z레이아웃 F보다 최근들어 더 많이 만들어지고 있다.웬만한 트렌드를 반영하는 웹사이트 (특히, 반응형 웹)들은carousel을 쓰면서 이미지를 크게 배치하고 있다. 사람들의 시선을 끌기위해. # 그런데 하나만 배치하기에는 그 공간이 아까우니까...여러개를 배치할 수 있는 방법으로 버튼형식 -> indicator button. 주력하는 아이템 or 프로모션을 할때최대한 많은 참여를 끌기위해(창출되는 이익을 위해)상단에 carousel로 배치하고있는것:) 레이아웃을 짤 때,어떤 레이아웃을 짤건지도 생각해봐야하는..
float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습
float 속성 활용하기 / display 속성 / 코딩 레이아웃 연습
2022.06.27[ float 속성을 활용한 레이아웃 ] first second first second [ float를 활용한 이미지 배치 ] Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, quidem, mollitia! Iusto assumenda non eos ex ut illo, eaque quots sit neque odit molestiae aliquam dignissimos libero amet placeat, dolor sequi hic ad illum possimus reicie..
속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float
속성 선택자 / 후손 및 자손 선택자 / 동위선택자 / float
2022.06.26# font-size: 0.9em 소수점으로 들어가면 글씨 크기를 작게 할 수 있다(: # 속성 선택자: 말그대로 속성을 선택하는 것! # id를 붙여서 쓰는 사람도 있고, 속성 선택자를 쓰는 경우도 있는데기호에 따라서~but, input태그가 100개인경우, 전화번호에 있는 색상만 바꾸고 싶다?물론 기호에 따라 방법이 다르겠지만,일일이 class명 주지 않아도 이미 있는 속성을 선택하는게 빠르기에속성 선택자를 쓰는게 낫다. # 선택자에서도 속성을 선택할 때에는type=""type=''type=외따옴표든 쌍따옴표든 안넣든, 상관없다. # 속성선택자는 동일한 속성이 많이 있을때 활용하기 괜찮은 선택자다. 이름: 아이디: 비밀번호: 전화번..
CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학)
CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학)
2022.06.251. content menu1 menu2 menu3 menu4 menu5 menu1 menu2 menu3 menu4 menu5 test 3. heading1 heading2 heading3 heading4 heading5 heading6
Coding study : CSS / margin:0 auto;
Coding study : CSS / margin:0 auto;
2022.06.24# css: cascading style sheet의 약자:)# cascading: 연속적인, 계층적인, 폭포수 html안에 head body가 있고 body안에div나 hi가 있고 hi안에 p태그가 있고.. 이런것 계층적인 구조다~ 나중에 제이쿼리 자바스크립트에 들어가면 더 중요한 개념이다. 자바스크립트에서 돔트리 구조. 그 안으로 접근을 해야한다.지금 하는 것보다 더 안으로 더더더안으로 접근을 해야하기에... 마찬가지로 css에서도 원하는 텍스트 색을 바꾸려면 얘를 선택하기 위해서 구조적 선택자를 이용해서 선택을 하기도한다.그래서 계층적인 구조를 통해 선택자를 선택해서 바꾼다가 cascading! # ID 선택자 vs. class선택자 둘중 선택하는건 본인의 기호이지만, 거의 id보단 class를 많..
CSS / 인라인방식 / 내부선언방식 / 외부선언방식 / 선택자
CSS / 인라인방식 / 내부선언방식 / 외부선언방식 / 선택자
2022.06.24# CSS: 디자인을 위한 언어Cascading Style sheets cascading: 연속적인, 폭포수연속적으로 안에를 선택할 수 있는 것!그런 시트를 만들어봅시다아> # 스타일이라는 태그. # css 선언방식 html을 짤때도!해서 DOCTYPE이 선언하는 거인데CSS에도 선언하는 방식이 있다.. 1) In-Line 인라인 방식:사이에html tag에 직접 style속성 값을 서술.안녕하세요,만나서 반갑습니다~ # 인라인 방식: 하나의 줄에 다 있다.but 잘 안쓸것 나중에, 한번에 바꿔야 하는 경우가 있으니까.그러면, 각각의 태그를 일일이 다 찾아서 바꿔야 하기 때문에 불편하다.수정하는데 있어서 엄청난 시간과 노력이 필요하기에수정하기 쉽게 기술해주는 게 좋기 때문에그렇게 쓰기 위한 방식이 내부선..
코딩연습 / 복습 / 공부 : semantic tag
코딩연습 / 복습 / 공부 : semantic tag
2022.06.23# 태그를 한꺼번에 찾아서 처리하고싶을때영역 지정해서 카피하고 ctrl+f 하면,복사한 태그가 검색어에 들어가고,find 버튼누르면 동일한 태그를 알려준다. # 그런데 find all 하면 전부찾아줌!다찾고싶으면,div>앞에 꺽새를 안넣고 찾아주면 다 찾을 수 있다. # h1태그에 넣는 배경색과div 스타일에 넣는 배경색은차이가 조금 있다. ***div로 묶여있는 애들은 그룹화가 되어있어서그룹에 배경색을 줄 수 있다. # 그리고 상단부분과 왼쪽의 공간부분은웹페이지에 자동으로default값으로 주고있는 여백이다. # div 스타일에서텍스트 컬러놓고싶으면div color다.***text color아님. # 배포할 수 있는 내용:section tag가 아닌 article tag # 의미가 잘 들어나도록 짜는 ..
div / span / semantic tag
div / span / semantic tag
2022.06.22# input태그는 단일태그라서 끝태그 없지만,textarea는 시작태그와 끝태그가 있다. # method방식은 두가지 방식get: 노출method: 암호화 # form태그의 action을 임시태그로 #으로 처리해도되구~나중에 더 배워서 원하는 타입으로처리! # 꼭 하나를 선택해야하는 type: radioradio 타입에서 중요한건 name! 동일한 name을 넣어줘야지그룹으로 인식함. # 다중 선택 type: checkbox이때도 마찬가지로 하나의 그룹으로 알려주려면 name동일하게~check한값이 전송되려면 text와 관련된 value값 넣어줄것! 여기서 기본적으로 처음에 체크되게하려면 checked.# 토글버튼 눌러서 선택하게 하려면input tag가 아니라 select tag!그 안에option ..
audio / form / input / radio / select / checkbox / label 태그연습
audio / form / input / radio / select / checkbox / label 태그연습
2022.06.211. 2. 3. 당신의 정보를 입력해주세요. last name: first name: 아이디: 비밀번호: 건의사항을 적어주세요 4. 당신의 사진을 올려주세요 동생의 사진을 올려주세요 5. 성별을 선택해 주세요 남자 여자 당신의 국적을 하나만 선택해 주세요 한국 미국 중국 6. 사용이 가능한 언어를..