본문 바로가기

Language40

CSS background 속성 background-color 속성 - 배경 색 지정하기 16진수( 세밀히 색상 조절) rgb값(필요하면 투명도도 함께 조절할 수 있음) 색상 이름(원색 사용) 배경 색 스타일은 하위 요소에 상속 되지 않는다. 따라서 각각의 요소에 배경을 따로 지정할 수 있다. 별도로 지정을 안할 경우 전체 배경 색이 보이게 된다. background-clip 속성 - 배경 적용 범위 조절하기 각각의 요소마다 배경을 지정하는 방법 말고 박스 모델 관점에서 배경 적용 범위를 조절할 수 있다. div 선택자의 경우 width랑 padding값 꼭 지정해야한다. border-box : 박스 모델의 가장 외곽인 테두리까지 적용 padding-box : 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 content-box : 박스.. 2022. 4. 16.
CSS list-style 속성 목록 스타일list-style-type  속성 list-style-image 속성list-style-position 속성list-style 속성텍스트 관련 스타일 속성 복습하기font 속성이랑 text 속성을 아직 헷갈린다. 자꾸 반대로 적어서 스타일이 적용이 안된다. 몇번 더 복습이 필요할 것 같다. 불릿 대신 이미지 넣을 때 제한이 있나? (사이즈나 용량에 대한)list-style-type  속성 - 목록의 불릿과 번호 스타일 지정하기 순서 없는 목록에 불릿 모양 바꾸기disc : ● circle : ○square : ■none : 불릿 없애기순서없는 목록에서 불릿 없애기ul { list-style-type: none; }순서 목록에서 숫자 바꾸기decimal : 1로 시작하는 십진수decimal-l.. 2022. 4. 15.
CSS text style 속성 2 문단 스타일direction 속성text-align 속성text-justify 속성text -indent 속성line-height 속성text-overflow 속성text-shadow 쉼표로 값을 구분해서 여러개의 그림자를 만들 수 있다. 잘 이용하면 그라데이션 가능.문단 스타일로 텍스트 정렬하는 것 말고 white-space를 이용해 공백이랑 문장 줄 넘김 한번에 조절 할 수 있다니 특히 텍스트가 많은 article 등에 사용하면 유용할 것 같다.Q : 그림자말고 글자 자체에도 그라데이션도 넣을 수 있을까?A : https://reveur1996.tistory.com/11 CSS text style 속성텍스트 스타일 color 속성 text-decoration 속성 text-transform 속성 te.. 2022. 4. 14.
CSS text style 속성 1 텍스트 스타일color 속성text-decoration 속성text-transform 속성text -shadow 속성white-space 속성letter-spacing / word-spacing 속성text-shadow 쉼표로 값을 구분해서 여러개의 그림자를 만들 수 있다. 잘 이용하면 그라데이션 가능.문단 스타일로 텍스트 정렬하는 것 말고 white-space를 이용해 공백이랑 문장 줄 넘김 한번에 조절 할 수 있다니 특히 텍스트가 많은 article 등에 사용하면 유용할 것 같다.그림자말고 글자 자체에도 그라데이션도 넣을 수 있을까?글자에만 배경을 따로 지정해서 색상을 넣는 방법은?텍스트 스타일 -문단에 사용되는 스타일 color  속성 - 글자 색 지정태그 {color:rgb(0,200,0);} /.. 2022. 4. 13.
CSS font 속성 글꼴 관련 스타일font-family  속성@font-face  속성 font-size 속성font-weight 속성font-style 속성font-variant 속성font  속성font-*속성은 사용하는 값들이 다르기 때문에 한번에 묶어서 사용할 수 있다. /슬래쉬로 연결하면 훨씬 간결하고 편하다.글꼴 파일을 먼저 선언하는 것으로 다른 결과를 낼 수 있다. 먼저 선언 한 woff 파일만 다운로드되고 그 후에 선언한 ttf는 다운로드 되지 않는 것. 효율적인 처리방식이라고 생각한다.Q : , 태그를 이용해 이탤릭체를 표현하는 것과 font-style 속성으로 이탤릭체를 표현하는 것에 차이점은?A :  웹 접근성과 연관되어있다. : 텍스트의 강세를 표현할 때 사용.(보다는 강하지 않다.)  스크린 리더기.. 2022. 4. 12.
CSS 스타일 기본기 스타일에 대한 기본적인 이해스타일 우선순위스타일 상속스타일을 사용하는 이유스타일 표기법스타일 시트태그(tag)와 요소(element)의 차이 : 태그는 태그 자체만을 지칭하며, 요소는 태그가 적용된 것을 가리킨다. 따라서 스타일을 적용하는 것은 태그가 아닌 요소이다. '요소에 적용되는 스타일'이 알맞은 표현이다.브라우저 접두사 : 브라우저별로 속성들이 다른 방식으로 지원되기 때문에 속성 이름 앞에 접두사(prefix)를 붙여 브라우저별로 구분한다. -webkit- 웹키트 방식 브라우저용 (사파리, 크롬)-moz- 게코 방식 브라우저용(모질라, 파이어폭스)-o- 오페라 브라우저-ms- 마이크로소프트 인터넷 익스플로러Q : 웹키트 방식과 게코 방식?A : 참고 사이트 바로가기CSS의 C. 캐스캐이딩(Casc.. 2022. 4. 12.
HTML5 / select 태그 / option 태그 / textarea 태그 / button 태그 다양한 태그를 활용하여 상품주문서 폼 만들기,태그 활용하여 드롭다운 목록 만들기, 태그 태그 태그주문서 작성할 때 예시 화면이랑 수량 입력란의 길이가 달라서 스타일 오류인줄 알고 몇번이나 체크하였으나 스타일 오류가 아니었다. 처음부터 끝까지 체크해보니, 수량 입력란의에서 max 부분에 오타가 있었다. 최대 수량이 적용되지않아서 입력란이 크게 보이는 것이었다. 오탈자 항상 체크하자.Q : 태그 와 태그의 차이는?A: 태그는 오직 하나의 옵션만을 선택할 수 있는  form input type이다. 태그는 list에서 주어지는 어떤 옵션이든 선택이 가능하다.  자체에 input을 넣어서 옵션을 추가할 수 있다. 하지만 는 안된다. form input type가 아니다.참고 문헌 사이트 :https://www.. 2022. 4. 10.
HTML5 / input 태그 / input type 종류 input 태그input type의 종류 코드 를 이용하면 코드를 텍스트로 보이게 할 수 있다.checkbox와 radio button의 차이점 : 복수선택이 가능한지 여부. checkbox만 복수 선택 가능. Q: range 모양 변형하는 방법 A: 브라우저별로 기본 스타일이 있어서 다르게 보인다.기본에 설정되어있는 브라우저 스타일 속성을 없애고 css에서 수정한다.  input[type=range] {-webkit-appearance: none;margin: 18px 0;width: 100%;}input[type=range]:focus {outline: none;}이런식으로 세부적인 부분들을 수정할 수 있으나 브라우저마다 다르기 때문에 각각 만들거나 통합된 코드를 입력해야한다. https://css-.. 2022. 4. 10.
HTML5 / form 태그 / label태그 / fieldset 태그와 legend 태그 폼 만들기form 태그label 태그fieldset 태그와 legend 태그 form에서 autocomplete 속성을 이용해 자동 완성 기능을 동작하게 할 수 있다. radio button,check box를 input type="radio/checkbox" 로 만들 수 있고, 이를 label을 연결하면 텍스트를 클릭해도 선택이 되어 사용성 측면에서 편리하다.list 만들 때 style="list-style:none로 리스트 앞에 bullet이 나타나지 않게 할 수 있다.form에서 input type="password"로 할 경우 입력하는 텍스트가 ...으로 보인다.Q: 한 문서에서 폼이 여러개인 경우 각각 다른 스타일을 적용하고자 할 때 편리하게 할 수 있는 방법은? head에서 style로 작성할.. 2022. 4. 9.

티스토리툴바