힘내보자

상황

VS CODE에서 Live Server를 쓰면 바로바로 적용되서 보이는데

이클립스나 STS에서 톰캣이랑 같이 서버를 돌리면서 내부에서 css를 수정하면 반영이 안되는데

컴퓨터를 재부팅하거나 브라우저를 껐다 다시 켜봐도 안되고 그러다가 또 어느새인가 적용되어있는데

기준도 모르겠고 난감한 적이 있었다

해결

1.html에서 경로 지정 코드 확인

<link>태그에 잘못된 부분이 없는지 href속성에서 경로부분에 잘못된 곳이 없는지 확인

2.브라우저 캐시 삭제

브라우저에서 전에 사용하던 css 정보를 계속 가져다 쓰기 때문에 정보가 변경된 최신 내용이 반영이 안되고 있는 것

1)익스플로러 엣지

설정 - 검색에서 쿠키 검색 - 지울 항목 선택 - 삭제

2) 크롬

설정 - 개인정보 및 보안 - 쿠기 및 기타 사이트 데이터 - 모든 쿠기 및 사이트 데이터 보기 - 모두 삭제

3.html파일에서 css를 연결하는 link태그의 href속성에 css파일명 마지막에 ?after 붙이기

2번 방법은 임시방편적인거고 3번이 근본 원인해결에 가깝다. ?를 css파일명 뒤에 붙이므로써 브라우저에서 다른 css파일을 인식하게 하는 개념. ?after를 많이 쓰는데 다른 문자를 써도 상관없긴 하다

CSS 파일을 링크하는 HTML 파일(PHP, JSP)을 열어 기존 CSS 파일의 URL 뒤에 ?after를 붙이면 됩니다. 요지는 브라우저에서 다른 CSS 파일을 인식하게 하는 것이므로 물음표 뒤에 어떤 문자열을 붙여도 상관없습니다. 저는 예시로 after라는 문자열을 추가했습니다. CSS 파일을 변경한 뒤 ?문자열을 추가하면 바로 변경사항이 적용되는 모습을 확인할 수 있습니다.

<textarea> 크기 고정하기

html css

아래 표시처럼 textarea는 유저가 크기를 조정할 수 있다.

이를 불가능하게 크기를 고정하게 하는 옵션이 style="resize: none;”

<textarea rows="10" cols="80" name="boardContent" style="resize: none;">

유의사항

<textarea> 단일로 넣어줘야 코드가 작동하는 듯함

아래처럼 상속으로 범위로 넣으면 안되는 것 같다

.QuesContent > textarea{
    width:890px;
    padding:1% 0;
    resize: none;
}

<input>나 <textarea> 같은 것들에 placeholder로 안내문구 주려는데

placeholder가 안먹힐 때가 있다. 왜그럴까?

placeholder 플레이스홀더는 글씨가 써지면 지워지기 때문에 input,textarea에 글씨가 들어가 있으면

글씨가 들어간 걸로 인식되서 애초에 placeholder가 안나오게 되므로 작동안하는게 아니니 주의!

아래처럼 오픈태그와 클로즈 태그 사이에 내용이 안들어가야 있어야 정상적으로 나옴

문자 뿐 아니라 엔터로 줄바꿈되도 데이터가 들어간 걸로 인식되서 placeholder가 사라지게 된다

css 선택자(selector)를 이용하여 div태그를 포함한 여러 태그에

css를 적용시키는데

자손, 후손 등 복잡하게 선택자가 들어가다보면 중간에 원하는 속성(property)가 안먹혀서 애먹은 경험들이 많이 있을 것이다

그럴 때 이 :not() selector를 사용하여 적용이 안되게끔 하면 된다

부모 Element의 style 중 특정 Element의 style이 특정 부분에 적용되지 않도록 하는 기능

.codeTest
{
	paddingt: 2%;
	background-color:blue;
}


.codeTest :not(.codeTableTest)
{
	padding:2%;
	background-color:blue;
}

위의 코드는 :not()을 안써서 부모 상속 때문에 코드가 적용이 안되고

아래 코드는 :not()를 사용하여 부모 상속을 무효화 했기에 패딩과 백그라운드 코드가 작동하게 된다

좀 더 자세한 내용은 아래에

https://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:not#Pseudo-class_:not

padding & margin 속성값

속성값의 적용 방향은 시계 바늘 12시 방향부터 오른쪽으로 도는 방향으로 순서대로이다.

즉, 12시 3시 6시 9시 순으로 상 우 하 좌 순이다

    
padding: 0 0 0 0 상 우 하 좌       속성값 4개

padding: 0 0 0 상 좌우 하           속성값 3개

padding: 0 0   상하 좌우            속성값 2개

padding: 0 상좌하우 4방향 적용   속성값 1개

* px로 고정값을 주는 것도 좋지만 반응형 웹사이트일 경우 %를 사용하면 유연해진다

padding 2%;

padding 적용

패딩이 없으니 글씨가 박스에 너무 딱 붙어있다

패딩 2% 적용

적당히 깔끔하게 떨어져 있어 보기가 좋다

1)div - 블록요소

HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용

<div> 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 **컨테이너(container)**로 자주 사용

CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용

2)span - 인라인요소

HTML 문서에서 인라인 요소(inline-element)들을 하나로 묶을 때 사용

자체만으로는 어떠한 의미도 가지지 않지만, class나 id와 같은 전역 속성과 함께 사용하여 스타일링을 위해 요소들을 그룹화하거나 lang 속성과 같은 속성값을 공유하는 데 유용하게 사용

<span class="word">span 요소</span>

<style>
    .word { background-color: orange; font-style: italic; }
</style>

문장(문단) 부분은 p,pre를 많이쓰는 거고 영역부분은 div,span

영역 안에 문단이 문단 안에 영역이 들어가기도 한다

※ 블록 요소와 인라인 요소의 차이

블록요소는 한 줄의 영역을 차지하고, 인라인요소는 작성한 내용만큼의 영역차지

• 인라인 요소 : height 적용x
• 인라인 요소 : width 적용x
• 인라인 요소 : text-align 적용x
• 블록 요소 : vertical-align 적용o

html5에 적용되었으며, 앞으로 점차 사용 점유율이 늘어날 것으로 보인다

시맨틱(Semantic) 태그란?

<div>태그의 용도를 그대로 가져오면서 상세 카테고리별로 컴퓨터가 인지할 수 있게 목적별로 나눠 준 태그

종류